开发者

CSS div stretching

First of here is what I'm trying to achieve :

http://img801.imageshack.us/img801/1516/sitelayout.png

I just cant get the content div working as I would like it, when you get too the page the div should stretch too the bottom if there isn't enough content too fill it, if there is too much content it should push down the footer. Here's what I have so far:

HTML

<!DOCTYPE HTML>
<html>
<head>
 <title>site</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="container">
<div id="headerBG"></div>
<div id="header"></div>
<div id="content">
 <div id="contentTop"></div>
 <div id="contentCenter"></div>
</div>
<div id="footerBG"></div>
</div>
</body>
</html>

CSS

html,body{ height: 100%; margin: 0; padding: 0; }

body{
background-image:url('images/bg.png');
background-repeat:repeat;
}

#container{
position: absolute;
background-color: green;
height: 100%;
width: 100%;
}

#headerBG{
position: absolute;
background-image:url('images/header_bg.png');
background-repeat:repeat-x;
height: 297px;
width: 100%;
}

#header{
position: relative;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 780px;
height: 200px;
}

#content{
position:relative;
margin-left: auto;
margin-right: auto;
width:780px;
height:70%;
}

#contentTop{
width:780px;
height:30px;
background-image:url('images/content_top.png');
background-repeat: no-repeat;
}

#contentCenter{
width:780px;
height:100%;
background-image:url('images/content_bg.png');
background-repeat: repeat-y;
}

#footerBG{
position: absolute;
bottom:0px;
background-image:url('images/footer_bg.png');
background-repeat:repeat-x;
width: 100%;
height: 144px;
}

Sorry if its a bit unclear, I've been tinkering with it a lot so this code might be a bit disorganized. I've been staring it to death and its starting to get blurry in my head >_< Anyway, I would really appreciate any insights you might h开发者_Python百科ave.

yay Coming back to html+css after a year or two yay


for ease i'd just look in to Faux Columns

set the #content to have a background image that resembles the effect you want.

you'll also probably want to look in to a sticky footer


See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). If you absolutely need the footer positioned exactly at the bottom of the browser window and the content div stretched, I'd recommend using a JS solution to calculate assorted heights as needed.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜