CODEWITHSUNDEEP
css
Guesser
Guesser

Reputation: 1857

CSS - content area fill window

<div id="content">

</div>

#content{
height:100%;
z-index:2;
position:relative;
top:40px
}

This DIV is positioned 40px from the top of the page and scrolls under a nav 40px high positioned above it.

How can I make #content fill the rest of the window and not extend a further 40px like happens when using height:100%?

Note this the content div must be able to expand beyond the window height when enough content inside it is present.

Upvotes: 0

Views: 102

Answers (3)

brouxhaha
brouxhaha

Reputation: 4093

If you can use calc, and want to only use css, do something like this:

#content {
    min-height: calc(100% - 40px);
}

Check http://caniuse.com/#feat=calc to see if the browsers you are targeting support it.

Upvotes: 1

DaniP
DaniP

Reputation: 38252

You can have two options here.

  • One using calc() compatibility :

     #content {
     min-height: calc(100% - 40px);
 }

  • Two using box-sizing compatibility and padding instead of top

     #content {
     padding-top:40px;
     min-height:100%;
 }

Upvotes: 1

Drace
Drace

Reputation: 699

You're going to need javascript to calculate the correct height that you need, you can then use jquery like such to change your height: 

$("#content").css('height','CALCULATED_VALUE');

All you need is to find out how many pixels you use for each line and multiply it by the lines you have to display.

Upvotes: 0

Related Questions