Why Height=100% Doesn't Work

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>

Parent div with height: 100% doesn't work

This can work

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div style="clear:both"></div>
</div>

Why height=100% doesn't work?

In general, for an element using percent on height to pick up its parent's height, the parent need a height other than auto or being positioned absolute, or the height will be computed as auto.

Based on those 2 options, and as you mentioned in a comment, your own header is dynamic in height, you are left with absolute positioning.

The problem with adding absolute to the content, it will be taken out of flow and stop behaving as a normal flowed flex item, the good news, one can add a wrapper set to absolute.

Stack snippet

.container {  display: flex;  flex-direction: column;  width: 200px;  height: 100px;}
.header {  display: flex;  background-color: rgba(255, 0, 0, 0.5);}
.content {  position: relative;                               /*  added  */  flex-grow: 1;  background-color: rgba(0, 255, 0, 0.5);}
.wrapper {  position: absolute;                               /*  added  */  left: 0;                                          /*  added  */  top: 0;                                           /*  added  */  right: 0;                                         /*  added  */  bottom: 0;                                        /*  added  */}
.third-party-component {  height: 100%;  width: 100%;  background-color: rgba(0, 0, 255, 0.5);}

<div class="container">  <div class="header">Header</div>  <div class="content">    <div class="wrapper">      <div class="third-party-component">       Third party component      </div>    </div>  </div></div>

CSS div height 100% not working

You could set the height of parent div1 to 1000px and set the children's height to :inherit.
Here's an example:

#div1{    width:1024px;    height:1000px;    background:red;    overflow:hidden;}#div2{        float:left;    width:100%;    height:inherit;    background:yellow;}#div3{        float:left;    width:460px;    height:inherit;    background-image:url('http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg');    background-size:100% 100%;    background-position:bottom;    background-repeat:no-repeat;}
#div4{    float:left;     width:270px;    height:inherit;    background:violet;}
#div5{    float:left;    width:25px;    height:inherit;    background:black;}
#div6{    float:left;    width:269px;    height:inherit;    background:blue;}

<div id="div1" class="center">    <div id="div2">        <div id="div3"></div>        <div id="div4"></div>        <div id="div5" ></div>        <div id="div6"></div>    </div></div>

Div height: 100% not working with body min-height: 100vh

The answer is simple as percentage min-height is calculated based on parent container's height value not min-height.

* {margin:0;}

body {
  background: gray;
  height: 100vh; /* look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100%;  /* look here */
}

<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

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>

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>

why doesn't height: 100% and width: 100% work?

To get vertical alignment you have to have a second div inside the first 100% sized one.

Approx centering (fine for small amounts of text) is easy: http://jsfiddle.net/ngVSd/4

If you want proper centering you have to set the height and width of the central div explicitly then give it negative margins of 1/2 the width and height. You also have to remove the padding and margin from body.

Note that to vertically center the text in the inner div you also need to set its line-height to be the same as its height: http://jsfiddle.net/ngVSd/6/

html, body {     height: 100%;    margin: 0;    padding: 0;}
#outerDiv {    height: 100%;     width: 100%;    background-color: red;     text-align: center; }
#wordDiv {    position: absolute;    background-color: lightblue;    top: 50%;    left: 50%;    width: 100px;    height: 100px;    line-height: 100px;    margin: -50px -50px;}

<div id="outerDiv">    <div id="wordDiv">Word</div></div>

Child's `height: 100%;` is not taking parent's full height, why?

Looks like I misunderstood the term containing block, I thought it would be the parent, but not really, there's much more into this.

I had to dig into the W3C standard to find out:

Definition of "containing block"
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.
The containing block in which the root element lives is a rectangle called the initial containing block.
For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

...

Why Height=100% Doesn't Work

Why doesn't height: 100% work to expand divs to the screen height?

Parent div with height: 100% doesn't work

Why height=100% doesn't work?

CSS div height 100% not working

Div height: 100% not working with body min-height: 100vh

Why does height 100% work when DOCTYPE is removed?

CSS `height` property, percentage values & DOCTYPE

TL;DR

min-height: 100% doesn't seem to work, div does not take full height

why doesn't height: 100% and width: 100% work?

Child's `height: 100%;` is not taking parent's full height, why?

Related Topics

Leave a reply

Why doesn't height: 100% work to expand divs to the screen height?

Parent div with height: 100% doesn't work

Why height=100% doesn't work?

CSS div height 100% not working

Div height: 100% not working with body min-height: 100vh

Why does height 100% work when DOCTYPE is removed?

CSS height property, percentage values & DOCTYPE

TL;DR

min-height: 100% doesn't seem to work, div does not take full height

why doesn't height: 100% and width: 100% work?

Child's `height: 100%;` is not taking parent's full height, why?

Related Topics

Leave a reply

CSS `height` property, percentage values & DOCTYPE