Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
Only if the parent element has a defined height, i..e not a value of auto
. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html
root element.
So set the height of the html
and the body
element to 100%
, as well as every single ancestor element of that element that you wish to have the 100%
height
in the first place.
See this example, to make it clearer:
html, body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
Why does min-height:100% not work since declaring a doctype?
When you remove the doctype the browser goes into quirks mode which does things differently to help older code that is not validated to render correctly.
Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago.
If you have height: 100% and the height of the parent element is auto then 100% means auto.
Only if the parent element has a defined height, i.e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.
So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.
html, body {
margin: 0;
padding: 0;
border: none;
height: 100%;
}
#mydiv {
height: 100%;
}
Why does height 100% work when DOCTYPE is removed?
CSS height
property, percentage values & DOCTYPE
The first part of your question asking how to apply a 100% height to your div
has been answered several times by others. Essentially, declare a height on the root element:
html { height: 100%; }
A complete explanation can be found here:
- Working with the CSS
height
property and percentage values.
The second part of your question has received much less attention. I'll try to answer that.
Why does removing the
doctype
make [the green background] work?
When you remove the DOCTYPE (document type declaration) the browser switches from standards mode to quirks mode.
In quirks mode, also known as compatibility mode, the browser simulates an old browser so it can parse old web pages – pages authored before the advent of web standards. A browser in quirks mode pretends to be IE4, IE5 and Navigator 4 so it can render old code as the author intended.
Here's how Wikipedia defines quirks mode:
In computing, quirks mode refers to a technique used by some web
browsers for the sake of maintaining backward compatibility with web
pages designed for older browsers, instead of strictly complying with
W3C and IETF standards in standards mode.
Here's MDN's take:
In the old days of the web, pages were typically written in two
versions: One for Netscape Navigator, and one for Microsoft Internet
Explorer. When the web standards were made at W3C, browsers could not
just start using them, as doing so would break most existing sites on
the web. Browsers therefore introduced two modes to treat new
standards compliant sites differently from old legacy sites.
Now, here's the specific reason why the height: 100%
in your code works in quirks mode but not in standards mode:
In standards mode, if the parent element has a height: auto
(no height defined), then the percentage heights of child elements will also be treated as height: auto
(as per the spec).
This is why the answer to your first question is html { height: 100%; }
.
For height: 100%
to work in your div
, you must set a height
on parent elements (more details).
In quirks mode, however, if the parent element has a height: auto
, then the percentage heights of child elements are measured relative to the viewport.
Here are three references covering this behavior:
- https://www.cs.tut.fi/~jkorpela/quirks-mode.html
- https://stackoverflow.com/a/1966377/3597276
- https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior
TL;DR
Here's what developers need to know in a nutshell:
A browser in quirks mode will render web pages in a way that is
unpredictable, unreliable and often undesirable. So always include a
DOCTYPE for the document to render in standards mode.Selecting the right DOCTYPE used to be an ambiguous and somewhat
confusing process with many DOCTYPE versions to choose from. But
today the process is as simple as ever. Just use:<!DOCTYPE html>
Why does !DOCTYPE html break height: 100%?
When you use of <!DOCTYPE html>
,you are in standard mode
and html
and body
have height
equal his inside content,so you must use this code:
html, body, form, #a {
height:100%;
}
but when you don't use of DOCTYPE
you are in quirks mode
and , html
and body
have default height
equal 100%
,only use this code:
#a {
height:100%;
}
Css height in percent not working
You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
<html><body><div></div></body></html>
Why doesn't height: 100% work to expand divs to the screen height?
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>
, which can be a percentage height. .
So, you've given all of your elements height, except for the <html>
, so what you should do is add this:
html {
height: 100%;
}
And your code should work fine.
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
<div id=fullheight>
Lorem Ipsum
</div>
Full-screen iframe with a height of 100%
You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
An alternative:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
To hide scrolling with 2 alternatives as shown above:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
Hack with the second example:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
To hide the scroll-bars of the iFrame, the parent is made overflow: hidden
to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!
Body height 100% displaying vertical scrollbar
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.
CSS Error ( width 100% and height 100% not working if !DOCTYPE is given)
Height/Width percent values are taken from its parent.
Which means you will have to specify 100% height/width to body
and html
element (since body
is a child of html
and it takes its height/width from html
)
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
<!DOCTYPE html>
<html>
<head>
<title>DeveOfE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">
</div>
</div>
</body>
</html>
Related Topics
Flexbox with Fixed Header and Footer and Scrollable Content
How to Stop the Browser from Url-Encoding Form Values on Get
Is There a CSS Selector for Selecting an Element Futherup in the HTML
Vertically Centering a Div in Body
Unwanted Spacing Below Images in Xhtml 1.0 Strict
My Nested <Li> Is Inheriting the Styles from Its Parent
Bootstrap 4 - Fullscreen Mobile Navbar
iOS Not Respecting Z-Index with -Webkit-Overflow-Scrolling
Pure CSS Continuous Horizontal Text Scroll Without Break
Overlay on HTML5 Fullscreen Video
Html5: Non-Replaced VS. Replaced Element
Why Should One Add Id to Their HTML Tags
Why Is 100% Height Not 100% of the Browser Height
How to Avoid Wrapping in CSS Float
Put Icon Inside Input Element in a Form (Not as Background Image!)