html - 没有背景图片的全尺寸侧边栏

Question

我的侧边栏没有达到 100% 的高度:

http://jsfiddle.net/PnsDD/

我不想实现伪列技术，因为它需要背景图像。而且我无法使用 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;
}

Answer 1

您可以向#main 和#sidebar 添加一个包装器并使其相对，然后在侧边栏上使用绝对定位来创建一个人造列。

参见 fiddle :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%;
}

编辑

但是，根据 fiddle，您可以老老实实地为包装器提供绿色背景，让它看起来好像侧边栏一样高。不过，我不知道这是否符合您的实际需要。查看另一个 fiddle :http://jsfiddle.net/PnsDD/12/