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>

JsFiddle example.

Related Posts:

  1. Why doesn’t height: 100% work to expand divs to the screen height?
  2. How to make a div 100% height of the browser window
  3. How to make a div 100% height of the browser window
  4. Open source social media icons to download and use on website? [closed]
  5. CSS calc width and height values
  6. Center image using text-align center?
  7. CSS Background Opacity [duplicate]
  8. How do I vertically align text in a div?
  9. Hide scroll bar, but while still being able to scroll
  10. How can I center text (horizontally and vertically) inside a div block?
  11. Center image horizontally within a div
  12. Draw Circle using css alone [duplicate]
  13. Remove CSS class from element with JavaScript (no jQuery) [duplicate]
  14. Transparent CSS background color
  15. Prevent line-break of span element
  16. Is there any way to change input type=”date” format?
  17. How to align iframe always in the center
  18. How to center a “position: absolute” element
  19. Expected RBRACE, but the bracket is there?
  20. How to make an image center (vertically & horizontally) inside a bigger div
  21. How to center text with Markdown?
  22. Set the table column width constant regardless of the amount of text in its cells?
  23. CSS Display an Image Resized and Cropped
  24. Disable Scrolling on Body
  25. Darken CSS background image?
  26. How do I make a placeholder for a ‘select’ box?
  27. FontAwesome icons are not showing, Why?
  28. Responsive image map
  29. CSS color vs. background-color vs. background?
  30. How to wrap text around an image using HTML/CSS
  31. Getting “Failed to load resource: net::ERR_FILE_NOT_FOUND” when trying to load a background image
  32. CSS: background-color only inside the margin
  33. Stretch background image css?
  34. Set cellpadding and cellspacing in CSS?
  35. How to make a whole ‘div’ clickable in html and css without JavaScript?
  36. How (and why) to use display: table-cell (CSS)
  37. Vertical Text Direction
  38. Disable Scrolling on Body
  39. CSS Background Image Not Displaying
  40. How to darken a CSS background image?
  41. Changing image sizes proportionally using CSS
  42. How can I create a marquee effect?
  43. How to give the background-image path in CSS?
  44. How to overlay image with color in CSS?
  45. CSS Background image not loading
  46. Outline radius?
  47. text-overflow: ellipsis not working
  48. How to reference nested classes with css?
  49. How to set Helvetica font?
  50. right align an image using CSS HTML
  51. Indent starting from the second line of a paragraph with CSS
  52. CSS Background Image Not Displaying
  53. CSS list-style-image size
  54. html not linking css
  55. Removing border from table cells
  56. How to display hr horizontally with flex?
  57. How can I position my div at the bottom of its container?
  58. How can I position my div at the bottom of its container?
  59. How do I install a custom font on an HTML site
  60. How to overlay one div over another div
  61. How to align an input tag to the center without specifying the width?
  62. How to get CSS to select ID that begins with a string (not in Javascript)?
  63. How can I embed video for discord directly from website?
  64. Setting table row height
  65. How do I disable the resizable property of a textarea?
  66. Is it possible to set the equivalent of a src attribute of an img tag in CSS?
  67. Place input box at the center of div
  68. How to display a gif fullscreen for a webpage background?
  69. Padding a table row
  70. Table scroll with HTML and CSS
  71. Set cellpadding and cellspacing in CSS?
  72. how to do a line break in Bootstrap 3.3.7
  73. How to align 3 divs (left/center/right) inside another div?
  74. CSS content property: is it possible to insert HTML instead of Text?
  75. Vertical align not working on inline-block
  76. Align an element to bottom with flexbox
  77. How can I change the thickness of my
    tag
  78. Is it possible to put CSS @media rules inline?
  79. Make padding responsive
  80. Vertically align text next to an image?
  81. How to create spoiler text?
  82. How do I center text in a span?
  83. text-align justify not working
  84. HTML not loading CSS file
  85. How can I center my ul li list in css?
  86. Is it possible to use css to shrink text to automatically fit the size of the div
  87. CSS !important not working
  88. Best way to center a
  89. How to best set a CSS3 transition to none?
  90. How to resize an image to fit in the browser window?
  91. Why is vertical-align: middle not working on my span or div?
  92. ow to change the style of the title attribute inside an anchor tag?
  93. Flex align-items: center not centering items
  94. HTML / CSS table with GRIDLINES
  95. Layout a flex box similar to a table?
  96. How do I clear the content of a div using JavaScript?
  97. WordPress footer menu floating with height of footer
  98. Style reply form different than comment form
  99. Style the last element having a specific class [closed]
  100. How can I insert a disclaimer in a WordPress site?

Leave a Comment