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