Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.
I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
Example also on JSFiddle
If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).
It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.
Based upon #BoltClock♦'s answer, I fixed it by zeroing the margin...
so
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
works where id "st-full-pg" is assigned to a panel div (which further contained panel-heading and panel-body)
A bit late, but maybe it helps someone.
Adding float: left; to #container removes the scrollbar, as W3C says:
•Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
This worked for me
adding float:left; is nice, but will interfere with central horizontal positioning using margin:auto;
if you know how big your margin is, you can account for that in your height percentage using calc:
height: calc(100% - 50px);
browser support is good, but only IE11+
https://caniuse.com/#feat=calc
/*removes default margin & padding*/
html, body{
padding: 0px !important;
margin: 0px !important;
}
/*sets body height to max; and allows scrollbar as page content grows*/
body{
min-height: 100vh;
}
I have found a solution: add padding: 1px 0; to body prevents vertical scrollbars to appear
For those who are coming here for an easier to understand answer that even includes code samples, this answer (copied from here) is for you.
No JavaScript or definite pixel values (such as 100px) are required, just, pure CSS and percentages.
If your div is just sitting there on its own, height: 50% will mean 50% the height of the body. Normally, the height of the body is zero without any visible content, so 50% of that is just, well, zero.
This is the solution (based on this) (uncomment the background lines to get a visualisation of the padding):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html
{
height: 100%;
/* background: green; */
}
body
{
/*
100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
This prevents an unnecessary vertical scrollbar from appearing.
*/
height: calc(100% - 1em);
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
The above was written so that there would still be the usual padding. You could set the dimensions of the red div to 100% and still see padding on each side/end. If you don't want this padding, use this (although it doesn't look nice, I recommend you stick with the first example):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html, body
{
height: 100%;
}
/* You can uncomment it but you wouldn't be able to see it anyway. */
/*
html
{
background: green;
}
*/
body
{
margin: 0;
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
I saw this problem fixed before where you put all the contents of body in a div called wrap. Wrap's style should be set to position: relative; min-height: 100%;. To position #container div 50px from the top and left put a div inside wrap with a padding set to 50px. Margins will not work with wrap and the div we just made, but they will work in #container and everything inside it.
here's my fix on jsfiddle.
you can add non-breaking space into the body tag.
<body> <othertags>...</body>
html, body {
height: 100%;
overflow: hidden;
}
If you want to remove the body scrolling add the following style:
body {
height: 100%;
overflow: hidden;
}
Inspired by #BoltClock, I tried this and it worked, even when zoom out and in.
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
I guess body was shifted down 20px.
It works for me:
html,
body {
height: 100%;
height: -webkit-fill-available; // Chrome
}
// Firefox
#-moz-document url-prefix() {
body {
box-sizing: border-box;
margin: 0;
padding: 1px;
}
}
Add overflow: hidden; to html and body.
html, body {
height: 100%;
overflow: hidden;
}
I found a quick solution: try set height to 99.99% instead of 100%
I'm working with a div that isn't positioned on the absolute left of the page, all I get is this.
Is there a way I can fix this? I've tried using many methods.
CSS:
#Hello {
background-color: #1c1c1c;
width: 200px;
height: 200px;
float: left;
}
Result
html, body { padding : 0; margin : 0; }
Add html, body { margin: 0; padding: 0 } to your styles. A common technique is to use a reset stylesheet like this to avoid these default browser styles.
My body is extending only to the bottom of my browser, but not to the bottom of the content. I need to have the background one colour, and the body content another, but i can't seem to make it work.
Here is the css
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
* html {
height: 100%;
margin: 0px;
padding: 0px;
}
html {
background-color: pink;
}
body {
margin: auto;
max-width: 500px;
min-width: 300px;
background-color: orange;
}
#header {
background: url('http://placehold.it/400x400/0191C8') center;
background-size: cover;
height: 50%;
}
#updown {
font-size: 150%;
}
http://jsfiddle.net/LPXVm/
JSFiddle
Wrap your content in a <section> (or <div> or whatever you want) and then give it the style:background-color:orange;.
Another alternative is to extend the closing </div> of updown and place it at the end of your content. Then give that a style of background-color:orange;.
But this will of course change the font-size of the whole thing.
JSFiddle - Second option.
"I need to have the background one colour, and the body content another".
This doesn't make any sense. The "background" is the . The is at the top of the DOM.
You should assign a background color to the body, and wrap all of your content in a wrapper div or content block then give that a different color.
See updated fiddle: http://jsfiddle.net/LPXVm/4/
There is some whitespace to the left of the header. How can i get rid of this?
.h {
background: url('../Content/images/headlogo.png') no-repeat center;
display: block;
height: 93px;
background-color: #D60024;
}
I want it to stretch from the beginning to the end.
JSFiddle
Add this too your CSS:
html, body {
margin: 0;
padding: 0;
}
This is either the margin or the padding for the body or the whole html document, either set html, body {maring:0; padding:0} or use a css reset like Eric Meyer's.
Demo
body{
margin: 0;
padding: 0;
}
.h {
display: block;
height: 93px;
background-color: #D60024;
}
The easiest way to reset styles is to set the margin and padding on all elements to zero
CSS Reset looks like this:
*{
margin:0;
padding:0;
}
JSFiddle URL
My css looks like this
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
}
div#header {
background-color: #969696;
height: 80px;
}
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 10px 20px 10px 350px;
}
and my html
<div id="header">
</div>
<div id="mid-bar">
<div id="searchbox">
</div>
</div>
you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div.
i want this margin for searchbox within the mid-bar div... and not from header div.
I's a known bug: would use padding instead of margin. so:
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
padding-top: 10px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 0px 20px 10px 350px;
}
Give padding to #mid-bar instead of searchbox margin
I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.
See your example here with paddings: http://jsbin.com/ememi3
If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.
Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.