The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Set div height to 100% body height – header height
The CodePen Demo is here :
I have two divisions – ‘header’ and ‘main-content’
The header is of height 150px and ‘main-content’ is about 100% minimum height.
I want to reduce the height of main-content so that it will be 100%-150px. How can i do that using css alone ?
CSS Calc could solve your problem however its browser compatibility isn’t really very strong, if you are worried about IE.
You need to include 40px of padding in your calculation so its:
min-height: calc(100% - 150px)
Hope this helps
Remove the top and bottom padding from the main content but keep the 100% height. Float the header, removing it from the document flow, and give it 100% width.