How can an html element fill out 100% of the remaining screen height, using css only?

by

forget all the answers, this line of CSS worked for me in 2 seconds :

height:100vh;

1vh = 1% of browser screen height

source

For responsive layout scaling, you might want to use :

min-height: 100vh

[update november 2018]
As mentionned in the comments, using the min-height might avoid having issues on reponsive designs

[update april 2018] As mentioned in the comments, back in 2011 when the question was asked, not all browsers supported the viewport units.
The other answers were the solutions back then — vmax is still not supported in IE, so this might not be the best solution for all yet.

Related Contents:

  1. How to remove the space between inline/inline-block elements?
  2. Why don’t flex items shrink past content size?
  3. Div width 100% minus fixed amount of pixels
  4. Centering in CSS Grid
  5. Fluid width with equally spaced DIVs
  6. How to remove indentation from an unordered list item?
  7. How to center buttons in Twitter Bootstrap 3?
  8. How to vertically center a inside a div? [duplicate]
  9. How can I draw vertical text with CSS cross-browser?
  10. `col-xs-*` not working in Bootstrap 4
  11. Two inline-block, width 50% elements wrap to second line [duplicate]
  12. A space between inline-block list items [duplicate]
  13. Prevent wrapping of span or div
  14. How can I make all images of different height and width the same via CSS?
  15. Span inside anchor or anchor inside span or doesn’t matter?
  16. Select option padding not working in chrome
  17. Change height using CSS
  18. CSS vertically align floating divs
  19. Fill remaining vertical space – only CSS
  20. Why are my div margins overlapping and how can I fix it?
  21. Shape with a slanted side (responsive)
  22. Pulsing Heart CSS animation
  23. Bootstrap 4: Multilevel Dropdown Inside Navigation
  24. how do I get a new line, after using float:left?
  25. How to use glyphicons in bootstrap 3.0
  26. How to put table in the center of the page using CSS?
  27. Bootstrap 4 img-circle class doesn’t seem to exist
  28. Add target=”_blank” in CSS
  29. Create line numbers on pre with CSS only
  30. Color for Unicode Emoji
  31. HTML input element wider than Containing Div
  32. HTML/CSS – Input [Text] How to disable the browser from offering suggestings in the Dropdown?
  33. Nesting block level elements inside the tag… right or wrong?
  34. Does the id attribute of an HTML element have to be unique in the whole page?
  35. Vertical Align text in a Label
  36. How to center form in bootstrap 3
  37. Adding a tooltip to an input box
  38. Getting an Embedded YouTube Video to Auto Play and Loop
  39. Show child element on parent hover in CSS
  40. How to center a element inside a container?
  41. Set div to have its siblings width
  42. Can I put a … tag within the body of a HTML file to send in email?
  43. How to start a new list, continuing the numbering from the previous list?
  44. Center align with table-cell
  45. Table row not expanding to full width
  46. Modify Select So Only The First One Is Gray
  47. How can I require at least one checkbox be checked before a form can be submitted?
  48. Is it possible to change width of tab symbol in textarea?
  49. Disable opacity on child element when parent element has opacity
  50. Textfield with only bottom border [closed]

Leave a Comment