Vertical Stretch - Latest Bytes

2 New Member

I have this CSS layout that I'd like to use for a personal site:

I want the layout to stretch all the way from the top of the page to the bottom of the page regardless of how little content there is, or what screen resolution the user is viewing the site with. If the content won't fit on one screen, I would obviously also want the layout to stretch to accomodate the text. However, I can't seem to figure out a way to get it to do what I want, because of all the divs nestled inside one another. Any ideas?

Jun 15 '07 #1

Subscribe Reply

9476

drhowarddrfine

7,435

Recognized Expert Expert

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
background-color:#efe;
}
div{
height:100%;
}
</style>

</head>
<body>
<div>
<p>Your Content</p>
</div>
</body>
</html>[/HTML]

Jun 15 '07 #2

yuiness

New Member

Sorry, looks like my link didn't show up correctly. Here it is: http://neogrotesque.lastsong.net/layouts/view/031/

My problem is more or less th existance of the footer divs. I can't just specify a 100% height because the footer_01 div has to have a height of the screen height minus the height of footer_02.

Jun 15 '07 #3

nitinpatel1117

111

New Member

you have to do this is javascript.

give all divs a different Id, so that you can refer to them indiviually.

Get the height of the viewable area and minus the div height of the footer to give you the target height.

then set the other div to this target height:

get/set div heights
document.getElementById('your_div_id').style.heigh t

for the height of the veiwable area, do search on goolge there are plenty of scripts out there.
Can't remember if screen.height is browser compatible, but its something along those lilnes.

Jun 18 '07 #4

drhowarddrfine

7,435

Recognized Expert Expert

You do not need javascript to do this. I'll have to look at my markup but you just put the footer in the position you normally would and give a negative margin to the footer or a wrapper div. I'll look it up later today.

Jun 18 '07 #5

drhowarddrfine

7,435

Recognized Expert Expert

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<style type="text/css">
*{
margin:0;
padding:0;
}
html,body
{
height: 100%;
}

#main
{
position: relative;
min-height: 100%;
}

#footer
{
position: relative;
margin-top: -1.5em;
}
</style>

</head>
<body>
<div id="main">main
</div>
<div id="footer">footer
</div>
</body>
</html>[/HTML]

Jun 18 '07 #6

nitinpatel1117

111

New Member

a small change to the above code is required as min-height is not properly supported in IE 6.

in the div 'main'; you'll need to add the height variable

#main
{
position: relative;
height:100%; //add this extra line
min-height: 100%;
}

Jun 20 '07 #7

Similar topics

vertical alignment of image

by: abracad | last post by:

Hi Is it possible to vertically align an image in the middle of a DIV of fixed height?