【发布时间】：2012-02-11 08:39:48
【问题描述】：
我不太擅长 CSS，我正试图弄清楚如何为我需要适应的网站执行以下操作：
container_div（body 正下方）100% 高度（body 也是 100% 高度），header 高度为 170px，然后是 content div（应该从底部 header 向下延伸），footer div 与版权声明为 50px高度。
在内容中应该有一个左右div（位置：相对；浮动：右/左；）
几乎像：yet another HTML/CSS layout challenge - full height sidebar with sticky footer
但是内容应该溢出：隐藏（我使用自定义滚动条脚本）
我不知道的部分是如何让内容 div（在页眉和页脚 div 之间）由剩余的高度组成。
我尝试过为 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;
}
【问题讨论】：
-
您是否希望页眉和页脚始终可见？