css - 在 CSS 中高度为 100%

Question

我有一个 3 栏网站。左侧和右侧，如果我输入高度:100%，它只会填充到该列内容的末尾。我希望它一直到页脚。因此不会在列和页脚之间留下空白。

已添加，http://jsfiddle.net/3vm2t/1/

CSS

/* RIGHT COLUMN */
#rightcolumn{
float: left;
width: 20%; /*Width of right column in pixels*/
min-width: 200px;
height: 100%;
margin-left: -20%; /*Set margin to that of -(RightColumnWidth)*/
background: #5f5f5f;
color: White;
}

/* LEFT COLUMN */
#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
min-width: 200px;
height: 100%;
margin-left: -100%;
background: #5f5f5f;
color: White;
}

万一有需要

body{
margin:0;
padding:0;
line-height: 1.5em;
color: black;
height: 100%;
}

/*TOPSECTION */
#topsection{
background: url('../images/bannerBGbkup.jpg'), url('../images/bannerBGl.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
height: 200px; /*Height of top section*/
color: White;
text-align:center;
min-width: 950px;
}

/* middle collumn */
#contentwrapper{
float: left;
width: 100%;
min-width: 1000px;
background: #919191;
}

#contentcolumn{
margin: 0 20% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

我试图解释我在说什么，但对 css/html 来说仍然有点陌生，但如果需要更多信息，请告诉我。不确定您是否需要任何 html 代码？但如果生病了更新。 谢谢

Answer 1

我认为你应该为你想做的事情使用表格 html 布局。

您可以将列放在 <table> 中, 但我认为最干净的方法是使用 display: table-cell CSS 属性。

我冒昧地编辑了您的 HTML/CSS 内容:http://jsfiddle.net/TxeJu/

在左右 block 之间移动了“内容” block ，添加了 display: table-cell属性，并删除您放在“内容” block 中的表格。