Question

这里首先是我想要实现的目标：

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

我只是不能让内容div按照我的意愿运行，当你得到页面时，如果没有足够的内容填充它，div应该伸展到底部，如果有太多的内容它应该推在页脚下方。这是我到目前为止所做的：

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;
}

很抱歉，如果它有点不清楚，我一直在修补它，所以这段代码可能有点混乱。我一直盯着它死，它开始变得模糊不清＆gt; _＆lt; 无论如何，我真的很感激你可能有的任何见解。

yay 一年或两年后回到html + css yay

Answer 1

为了方便我只需查看Faux Columns

将#content设置为具有类似于您想要的效果的背景图像。

你也可能想要查看sticky footer

Answer 2

看看这是否适合您：http://jsfiddle.net/brianflanagan/jhvBt/ IE里程可能会有所不同（使用min-height属性）。如果您绝对需要将页脚准确定位在浏览器窗口的底部并且内容div已拉伸，我建议使用JS解决方案根据需要计算各种高度。

CSS div拉伸

2 个答案: