Question

我的侧边栏未达到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;
}

Answer 1

您可以在#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/

Answer 2

不确定您是否可以强制侧边栏的高度与其旁边的浮动div的高度相匹配。但是，如果你调整你的HMTL并使容器具有你想要的背景，那么你可以实现你想要的东西：

http://jsfiddle.net/uJ5jh/

<div id="main">
  <div id="content">
    main content
  </div>
  sidebar
</div> 

#main
{
  background-color: #F0FFFF;     
}

#content
{
  width:75%;
  float:left;
  background-color: #FFF0FF; 
}

没有背景图像的全尺寸侧边栏

2 个答案: