How to stretch div height to fill parent div – CSS

by

Suppose you have

<body>
  <div id="root" />
</body>

With normal CSS, you can do the following. See a working app https://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

With flexbox, you can

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

More Related Contents:

  1. How to collect and manipulate data in HTML using
  2. SVG drop shadow using css3
  3. Switching the order of block elements with CSS [duplicate]
  4. Imitating a blink tag with CSS3 animations
  5. How can I force a long string without any blank to be wrapped?
  6. 100% Min Height CSS layout
  7. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  8. Equal space between flex items
  9. How to get a child element to show behind (lower z-index) than its parent?
  10. What is the performance impact of the universal selector?
  11. How to wrap text of HTML button with fixed width?
  12. Place boxes inside ul in center, but align them left
  13. Image width/height as an attribute or in CSS? [duplicate]
  14. Aligning decimal points in HTML
  15. Why is nth-child selector not working?
  16. Can I nest button inside another button?
  17. What’s default HTML/CSS link color?
  18. CSS: stretching background image to 100% width and height of screen?
  19. How to get tiles centered and left-justified at the same time
  20. How to Animate Gradients using CSS
  21. Bootstrap navbar: nothing is displayed on smaller devices
  22. Why does inline-block cause this div to have height?
  23. Google Web Fonts and PDF generation from HTML with wkhtmltopdf
  24. How can I increase a scrollbar’s width using CSS?
  25. Will targeting IE8 with conditional comments work?
  26. Height is not correct in flexbox items in Chrome [duplicate]
  27. Can I use an image from my local file system as background in HTML? [duplicate]
  28. How to keep styles after animation?
  29. How to make Bootstrap cards the same height in card-columns?
  30. overflow-y:visible not working when overflow-x:hidden is present [duplicate]

Leave a Comment