How to make div's use 100% height witout stretching too much

Hello all.

I have a problem with this site: http://cumdealer.com/csstest/test.html

My problem is that the "div-1" stretches too much. I only want it to stretch too fill the window height (no scrollbars!), but as you can see it stretches beyond window height.

I don't know if I have described this probobly, but I hope you understand my problem!

Thanks in advance,
fischer.

 

this is because you have 3 divs, and as 1 is set to 100% height, so the other divs are added onto that height. If you want it to fit the whole height of the page you'll need to make the accumulative total of all the divs make 100%.

eg:

#div-1 {
  height:80%;
}
#div-before {
  height:10%;
}
#div-after {
  height:10%;
}

Code (markup):

 

thanks for the answer, I see your point!
- but can't I set a fixed width in pixels on "div-before" and "div-after"?
I would like these to have a fixed width and "div-1" to stretch according to window size.

 

if you want it to behave like a frameset with the top and bottom divs constantly positioned at the top and bottom of the page there's a bit of a trick to it.

First, layout the html as such...

<div id="div-1">
<div id="div-before">text</div>
--content for div 1 goes underneath div-before--
</div>
<div id="div-after">text</div

Code (markup):

Then add the following to your css...

html,body{
    height:100%;
    margin:0;
    padding:0;
}
#div-1 {
min-height:100%;
margin-top:-25px;/* height of div-after*/
}
/* mac hide \*/
* html #div-1{height:100%}
/* end hide */
#div-before {
margin: 0;
padding: 0;
background-color: #000;
height:25px;
border-top:25px solid #000;/* height of div-after - soaks up space made by negative margin*/
}
#div-after {
clear:both;
height:25px;
}

Code (markup):

all this is doing, is adding div-before to be at the top of your page, and making div-1's height 100% minus whatever the pixel height of div-after is.

hope that's what you were after

 

You're thinking print design. A web page doesn't really have a height. It's as tall as it needs to be. Let your content decide how much space it needs.

In web design, the content must come first. Web design is about what the visitor will see and how he'll get around the site. After you've determined what goes on the page, and how you want the visitor to 'tour' the page, and you've properly marked up the content with semantically correct html, then you can begin the presentation part. It is damned difficult to lay out a well crafted page without content.

cheers,

gary

 

yeah i agree... i just usually use this method for small pages like error messages etc to create a sticky footer

 

Just in case you thought otherwise, my remarks were directed toward the OP. Most newbies, and especially those with graphics training, have little understanding of how a web page works, as opposed to print. It is not easy to get them over the hump, either.

cheers,

gary

 

yeah i have a mate from a print background getting into web design and know exactly what you mean... im constantly driving articles on semantics and web standards down his throat

 

thank you very much for the answers guys!..
it was very helpfull!..

cheers!

 

well, it might be a bit more complicated regarding cross-browser compatibility, so try this layout:

link