Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height

by

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>

This wouldn’t work, if I didn’t give 100% height to—say html element: 

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>

… or .inner 

html, body, .outer, .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>

More Related Contents:

  1. Why does height 100% work when DOCTYPE is removed?
  2. Animate text for landing page
  3. CSS – Equal Height Columns?
  4. How do you easily horizontally center a using CSS? [duplicate]
  5. CSS Floating Divs At Variable Heights [duplicate]
  6. Margin-Top not working for span element?
  7. Footer at bottom of page or content, whichever is lower
  8. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  9. Is float for layout bad? What should be used in its place?
  10. Center a div in CSS [closed]
  11. How to create equal height columns in pure CSS [duplicate]
  12. How do I right align div elements?
  13. Right to Left support for Twitter Bootstrap 3
  14. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  15. How does object-fit work with canvas element?
  16. How to make a element expand or contract to its parent container?
  17. scale HTML5 Video and break aspect ratio to fill whole site
  18. Disable zoom on a div, but allow zoom on the page (an alternate div)
  19. How would you make two s overlap?
  20. element not working in Internet Explorer 11
  21. Split Div Into 2 Columns Using CSS
  22. why is my content showing outside the div?
  23. How to get these two divs side-by-side?
  24. Why use an HTML5 semantic tag instead of div? [duplicate]
  25. How to display and hide a div with CSS?
  26. How to make responsive table [closed]
  27. Why adds extra top margin?
  28. Is there a way to style HTML5’s range control?
  29. Background image not displaying in chrome browser
  30. Difference between and with text-align:center;?

Leave a Comment