0
我不是在CSS非常好，我试图找出如何做一个网站，下面我需要适应：CSS布局与填充的内容（高度）
container_div（直属机构） 100％高度（身体也是100％高度），头部高度为170px，然后content div（应该从底部头部向下延伸至），footer div，版权声明为50px高度。
在内容上应该有一个左右DIV（两者位置：亲属;浮动：左/右）
几乎一样的东西：yet another HTML/CSS layout challenge - full height sidebar with sticky footer
但随后的内容应该是溢出：隐藏（我使用自定义滚动条脚本）
我无法弄清楚的部分是如何让content div（在页眉和页脚div之间）由剩余的hight组成。
我试过把容器的背景加到100％的高度，但是因为我的页眉和页脚是透明的，所以你可以通过它们看到内容的背景，这很丑陋。
有人可以给我一个正确的方向与标准模板微移？我可以自己找出其余的。
只为内容的div的CSS代码就可以了是（与有关的CSS的其他一些解释）
编辑：
只是让我们有一些工作（这是比较容易回答我的问题）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>stretchy footer</TITLE>
<LINK rel="stylesheet" type="text/css" href="index.css" />
</HEAD>
<BODY>
<DIV id="container">
<DIV id="header">
<IMG src="./image/header2.png">
</DIV>
<DIV id="left">
<DIV id="content">
This is the div which needs to be stretched between header and footer.
</DIV>
test<BR>
test<BR>
test<BR>
test<BR>
test<BR>
</DIV>
<DIV id="right">
t
</DIV>
</DIV>
</BODY>
</HTML>
CSS样式：
/* <GENERAL> */
/* cross-browser reset stylesheet */
* { margin: 0; padding: 0; border-style: none;}
*:hover, *:active, *:focus {
outline: 0;
}
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
line-height: 1;
-moz-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
-webkit-min-device-pixel-ratio:0;
height: 100%;}
body {height: 100%;} /* safe crossbrowser font */
a {text-decoration: none; outline: none;}
a:active {
border: none;
outline: none;}
.imagewrapper img {
display: inline-block;
width:100%;
-ms-interpolation-mode:bicubic;
image-rendering:-webkit-optimize-contrast;
image-rendering:-moz-crisp-edges;
image-rendering: optimizeQuality;
zoom:1; *display: inline;}
/* </GENERAL> */
.clear {
clear: both; /* deze class gaan we gebruiken om de twee floats #left en #right te clearen. */
}
#container {
height: 100%;
width: 1018px;
margin: 0em auto -10em auto;
position: relative;}
#left {
display: inline-block;
float: left;
height: 100%;
width: 950px;
padding: 0em 2em 0em 1em;
border: 1px solid brown;
background: url(./image/main.png);
}
#left p {
text-align: justify;}
#right {
float: right;
width: 14px;
border: 1px solid red;
}
你想让页眉和页脚在任何时候都可见吗？ – 2012-01-16 13:21:41