CSS div拉伸

Question

First of here is what I'm trying to achieve : 首先是我要实现的目标：

http://img801.imageshack.us/img801/1516/sitelayout.png 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. 我只是无法使内容div像我所希望的那样工作，当页面太多时，如果没有足够的内容填充div，那么div应该拉伸得太深；如果内容太多，它应该压低页脚。 Here's what I have so far: 这是我到目前为止的内容：

HTML 的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 的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 have. 我一直盯着它看死了，它开始变得模糊不清。__<无论如何，我非常感谢您可能有任何见解。

yay Coming back to html+css after a year or two yay 耶一年或两年后耶即将返回的HTML + CSS

Answer 1

for ease i'd just look in to Faux Columns 为了方便起见，我只想看看人造柱

set the #content to have a background image that resembles the effect you want. 将#content设置为具有与所需效果相似的背景图像。

you'll also probably want to look in to a sticky footer 您可能还需要查看粘性页脚

Answer 2

See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). 查看是否适合您： http : //jsfiddle.net/brianflanagan/jhvBt/ IE里程可能会有所不同（取决于min-height属性）。 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. 如果您绝对需要将页脚恰好位于浏览器窗口的底部，并且将内容div拉伸，则建议使用JS解决方案来根据需要计算各种高度。

CSS div拉伸

问题描述

2 个解决方案

解决方案1
0 2010-10-20 20:22:03

解决方案2
0 2010-10-21 00:04:13

CSS div拉伸

问题描述

2 个解决方案

解决方案1 0 2010-10-20 20:22:03

解决方案2 0 2010-10-21 00:04:13

解决方案1
0 2010-10-20 20:22:03

解决方案2
0 2010-10-21 00:04:13