Forums

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #148553
    pradeepsixer
    Participant

    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 ?

    #148766
    georgearnall
    Participant

    CSS Calc could solve your problem however its browser compatibility isn’t really very strong, if you are worried about IE.

    CodePen
    You need to include 40px of padding in your calculation so its:

    min-height: calc(100% - 150px)

    Hope this helps

    #148788
    wolfcry911
    Participant

    http://codepen.io/wolfcry911/full/lyzIs

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.