For some reason, min-height is not working on Firefox. I tried setting min-height on the body, but Firefox totally ignored it. Since my page is dynamic, I cannot just set the height to 100%. What should I do?
body {
border: 1px solid black;
width: 100%;
min-height: 100%;
}
<body>
This is the body.
</body>
height percentages are inherited (that includes min-height and max-height, too). From the CSS spec:
Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block.
What most people don't realize is that body is just an element like any other, and so is html. What people also don't realize is that these elements don't have an inherent height set. The parent of html is the viewport, and it does have an inherent height of 100%. The viewport is--more or less--the browser window, minus any menu or title bars.
Since height percentages inherit from their parent, and you don't have a height set for your html element, your CSS of min-height: 100%; doesn't have a value to take 100% of. So your body is taking min-height: 100% of 0, basically.
To fix this, simply tell your html element to be 100% the height of the viewport:
html {
height: 100%; /* this is the important bit */
}
body {
border: 1px solid black;
width: 100%;
min-height: 100%;
margin: 1px; /* I added this to make the border around the body a little easier to see. Normally you want to set it to 0 or leave it alone completely */
}
<body>
This is the body.
</body>
However, if you don't want to set your entire document to be as tall as the viewport (I strongly recommend that you do), you can also use position: absolute; on your body element so that the percentage height will always resolve, regardless of the height of its parent element. This is what Saqib was trying to get at in the comments above. From the CSS Spec on min-height and height, respectively:
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').
-
Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved.
body {
border: 1px solid black;
width: 100%;
min-height: 100%;
position: absolute;
margin: 1px; /* I added this to make the border around the body a little easier to see. Normally you want to set it to 0 or leave it alone completely */
}
<body>
This is the body.
</body>
(I don't know what code of yours is working in Chrome, but the code in your question has the same behavior in Chrome as it does in Firefox.)
Related
How do you fill the height when the website is zoomed 100%? When zoomed out i don't want the element to keep filling the screen. To be more clear, when a user enters the website and the website is zoomed by the default 100% the whole screen should be filled with a color. But when the user scrolls down or zooms the fill should not dynamically change its height.
From comments i edit the code to get a better result, but now there is gaps around the element:
header.mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
First, you're setting the position: fixed of the .mainHeader class. This causes the element to always be at the same position in the viewport, regardless of zoom-level or scrolling position.
Remove this position: fixed, and its corresponding top and left properties.
You're currently setting the height to 100% of its parent element, so it would always be as big as that.
To set the height using the viewport's (visible page area) height, you can use vh units, equivalent to percentage of the viewport height (vh) - likewise for width and vw.
So, to set the height of the element to 100% of the viewport height, you can simply do:
height: 100vh;
EDIT - NOTE: the vh unit isn't supported by all browsers (I've found some, trust me). So I would recommend setting a fallback value, above the vh one, to prevent incompatibility. For example:
height: 500px; // fallback value if browser doesn't support vh
height: 100vh; // this value overrides the above one, if the browser supports vh
You might then need to remove padding and/or margin from the body or other elements, if you're seeing whitespace around the element. Have a play about to get the right effect.
For example:
body {
padding: 0;
margin: 0;
... other properties
}
Please find a JSFiddle of this in action: https://jsfiddle.net/s49p6Laj/
Sample code:
HTML
<div class="header">
I fill the viewport!
</div>
<div class="other-stuff">
// All your other content here...
</div>
CSS
// Set the body's margin and padding to 0
body {
margin: 0;
padding: 0;
}
// Make the container fill the viewport
.header{
width: 100%;
height: 100vh;
While designing layouts I set the html, body elements' height to 100% but in some cases, this fails, so what should be used?
html, body {
height: 100%;
}
or
html, body {
min-height: 100%;
}
Well, this is not opinion based as each method has its own flaws, so what's the recommended way to go for and why?
If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:
html {
height: 100%;
}
body {
min-height: 100%;
}
My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.
The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.
For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.
You can use viewport height (vh) unit:
body {
min-height: 100vh;
}
It is relative to screen, not to parent height, so you don't need html height: 100%.
Can anyone tell me why position:fixed cause the element to be wider than the browser or other content on the page and causing horizontal scrolling?
Here is the code
HTML
<header>
this is a header
</header>
<div class="container">
this is a container
</div>
CSS
header {
width: 90%;
height: 100px;
background: blue;
position: fixed;
z-index: 100;
}
.container {
width: 90%;
height: 500px;
background: red;
position: relative;
z-index: -2;
}
Here is a link to the codepen http://codepen.io/colbydodson/pen/wcgua
Width is differently applied to relative and fixed elements, the ancestors margin and the style property that are parent-inheritable in respect to their position property.
The body tag will have it's default User Agent Style Sheet 8px margins (http://www.w3.org/TR/CSS2/sample.html),
header 90% width, being fixed, without any top, left, right or bottom value will be positioned to the nearest available place, but will inherit the original document/viewport size, making it in reality 90% wide, but positioned at the 10px 'body' margin offset.
To test add top:0; left:0; for the fixed header http://jsbin.com/ETAqADu/1/edit
.container being a block-level DIV element set to relative position, will be 90% width of the available parent usable width, which is the body innerWidth (not counting the 10 + 10 px margins on the X axis)
Unwanted result:
logically header will be 20px wider than .container because position fixed moves your element out of body flow.
Fix:
control your parent (body) element default margin by setting to 0
body { margin: 0; }
Or a small but heavy CSS reset like:
/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }
Read also CSS Box Model - Margin collapsing
I was having a similar problem only on mobile. Despite having no margins, borders, padding on any of the parents, my fixed element was still wider than the viewport, and I didn't have the option of using width: auto.
If you're willing to not support IE8 and below, you can use
width: 100vw
Can I use Viewport units: vw, vh, vmin, vmax
The accepted answer is fine but in my case, I was seeing a fixed header that was wider than the rest of the page only on a mobile device. It happened to be caused by some element in the footer that had a width in pixels wider (width: 750px in my case) than the viewport of the browser.
If you want to know if some element on your page is causing this problem for you? Just open your browser console and remove some elements further down. At some point, you may notice the header becoming the correct width again. Chances are that the element you just removed or some element in it has a width in pixels wider than the viewport of the browser.
The solution, in that case, is to either set that element to a lesser width or make it flexible.
By default the body tag have margin.
Try this in your stylesheet:
body{
margin: 0;
}
As Salaw mentioned, using body { margin: 0; } will solve the issue, since <body> has default margin/padding (depending on the browser). position: fixed; removes an element completely from the flow of the document and makes it relative only to the viewport, while position: relative; does not.
Given this fact, and given that width: 90% means "make this element take up 90% of parent element's available space", and given that the parent of a fixed element is the viewport while the parent of this relative element is the body with its margin, you have the discrepancy in sizes.
See http://codepen.io/anon/pen/exzpC
Because position:fixed behave as the element is detached from document, and placed in the nearest top/left corner of the document, adding default body's margin. That's why it will take the same amount of space, as your second div, if you reset body margin.
While designing layouts I set the html, body elements' height to 100% but in some cases, this fails, so what should be used?
html, body {
height: 100%;
}
or
html, body {
min-height: 100%;
}
Well, this is not opinion based as each method has its own flaws, so what's the recommended way to go for and why?
If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:
html {
height: 100%;
}
body {
min-height: 100%;
}
My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.
The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.
For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.
You can use viewport height (vh) unit:
body {
min-height: 100vh;
}
It is relative to screen, not to parent height, so you don't need html height: 100%.
Has anyone heard of a bug that occurs with IE8 when applying height as a percentage to the html and body using CSS? I'm seeing a white background when a tile pattern should be applied.
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-color: #666;
background-image: url('../images/body/bg_pattern.gif');
}
IE8 interprets the height element closer to the standards than IE7 did. The statement
`Height: 100%
Is pretty much ignored. Percentage heights are based upon the height of their parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto. You can see more about this on w3.org.
If the page you are displaying is empty, body will have a height of 0 and you will see the default background.
To prevent the generated height:0 when you're floating the child elements, set
overflow:hidden;
position: relative;
on the parent.