我的侧边栏未达到高度的100％：
我不想实施仿列技术，因为它需要背景图像。而且我无法使用来实现某些想法，display因为为了保持页脚的粘性，我将某些显示更改为table或table-row。
有什么办法吗？
的HTML
<div id="wrapper">
<div id="header">header header header header header</div>
<div id="main">John Edward Brownlee was Premier of Alberta, Canada, from 1925 to 1934
as leader of the United Farmers of Alberta (UFA) caucus. After winning
the 1926 election, his successes included obtaining control of Alberta's
natural resources from the federal government and selling the money-losing
railways to help balance the provincial budget. His government's fortunes
declined after the 1930 election. Agricultural prices collapsed, throwing
many farmers into poverty. He tried to broker deals between farmers and
banks, but found neither side eager to compromise. In 1933, Prime Minister
R. B. Bennett named Brownlee to the Royal Commission on Banking and Currency
as a representative of western interests and unorthodox viewpoints. While
Brownlee concurred with the commission's ultimate recommendation for the
creation of a central bank, he also made his own recommendations. In 1934
he was sued for the seduction of Vivian MacMillan, a family friend and
a secretary in his government's attorney-general's office, who claimed
that they had carried on an affair for three years. The jury sided with
MacMillan despite Brownlee's denials and, in deference to public outrage,
he resigned as premier. (Full article...)</div>
<div id="sidebar">sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar</div>
</div>
<div id="footer">footer footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer footer footer
footer footer</div>
的CSS
html, body {height: 100%;}
body
{
display: table;
}
#header,
#main,
#footer
{
display: table-row;
}
#header,
#footer
{
height: 1px;
width: 100%;
}
#wrapper {
height: auto;
}
#wrapper
{
width:90%;
margin:0 auto;
background-color: #FFFFF0;
min-height: 100%;
display: table;
}
#main
{
width:75%;
float:left;
background-color: #FFF0FF;
}
#sidebar
{
width:25%;
float:right;
background-color: #F0FFFF;
}
#header
{
background-color: #FFDDFF;
}
#footer
{
background-color: #DDDDDD;
position:relative;
clear:both;
}
您可以将包装器添加到#main和#sidebar并使其相对，然后在侧栏上使用绝对定位来创建伪列。
参见小提琴：http : //jsfiddle.net/PnsDD/2/
相关代码：
<div class="content-wrap">
<div id="main"></div>
<div id="sidebar"></div>
</div>
的CSS
.content-wrap {
float:left;
width:100%;
position:relative;
}
#sidebar {
position:absolute;
top:0;
bottom:0;
right:0;
width:25%;
}
编辑
但是，基于小提琴，您可以诚实地给包装纸赋予绿色背景，并使其看起来像边栏一样高。不过，我不知道这是否符合您的实际需求。查看其他小提琴：http : //jsfiddle.net/PnsDD/12/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句