height: 100% or min-height: 100% for html and body elements?
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
andmin-height
tohtml
andbody
respectively is because neither element has any intrinsic height. Both areheight: auto
by default. It is the viewport that has 100% height, soheight: 100%
is taken from the viewport, then applied tobody
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.
Make body have 100% of the browser height
Try setting the height of the html element to 100% as well.
html,
body {
height: 100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
html {
height: 100%;
}
body {
min-height: 100%;
}
Setting html, body with min-height: 100% but also allow it to expand
Just use min-height
instead of height
on your wrapper:
html,body { height: 100%; padding:0; margin:0;}
.wrapper { display: flex; flex-direction: column; border: 1px solid black; min-height: 100%; box-sizing: border-box;}
.body { flex: 1; min-height: 300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrapper"> <header style="background-color: lightblue"> header </header> <div class="body" style="background-color: orange; opacity: 0.3"> body </div> <footer style="background-color: yellow"> footer </footer></div>
Make child element 100% height of the BODY element which is also 100%
add overflow:visible;
to body
, change min-height:100%;
to height:100%;
for body
and height:100%;
to min-height:100%;
for .page-content
Body at 100% and min-height of 100% but content extends past browser screen
Should work fine if you just set a min-height
:
html, body {
min-height: 100%;
}
As you can see here: http://jsfiddle.net/7hg7m
min-height: 100% doesn't seem to work, div does not take full height
You need to set parent elements height to 100%
as well. In your case, set body
's height to 100%
.
html { height: 100%;}
body { padding: 1.25em; background-color: #292c37; border: 1px solid red; height: 100%;}
.main-app { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; border: 1px solid green;}
header { background-color: wheat;}
main { background-color: firebrick;}
footer { background-color: skyblue;}
header,main,footer { padding: 1.25em;}
<div class="main-app"> <header>Header</header> <main>Main</main> <footer>Footer</footer></div>
html and body not respecting 100% height
You have this in your code:
html, body {
height: 100%;
}
That essentially limits the primary containers to 100% height of the viewport.
Because of the way percentage heights work, it's a bit messy and complicated to get them to work with min-height
.
Instead of percentage heights consider viewport percentages. Remove the code above and add this:
body {
min-height: 100vh;
}
revised fiddle
From the spec:
5.1.2. Viewport-percentage lengths: the
vw
,vh
,vmin
,vmax
unitsThe viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly.
- vw unit - Equal to 1% of the width of the initial containing block.
- vh unit - Equal to 1% of the height of the initial containing
block.- vmin unit - Equal to the smaller of
vw
orvh
.- vmax unit - Equal to the larger of
vw
orvh
.
How to make body take 100% min height and height as auto
body { min-height: 100vh; }
is all you'll need.
Related Topics
Make Flex Items Take Content Width, Not Width of Parent Container
How to Escape Ampersands in Xml So They Are Rendered as Entities in Html
Display a Div Width 100% With Margins
How to Trigger Autofill in Google Chrome
How to Draw Vertical Text With CSS Cross-Browser
Heights Rendering Differently in Chrome and Firefox
How to Make a ≪Div≫ Always Full Screen
How to Format an HTML Tooltip (Title Attribute)
How to Make Css3 Rounded Corners Hide Overflow in Chrome/Opera
Force to Open "Save As..." Popup Open At Text Link Click For Pdf in Html
Linking to Another HTML Page in Google Apps Script
How to Use Content-Disposition For Force a File to Download to the Hard Drive
Target="_Blank" Vs. Target="_New"
How Create Table Only Using ≪Div≫ Tag and Css