Html 无背景图像的全尺寸侧边栏

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

---

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

看小提琴：

相关代码：

<div class="content-wrap">
    <div id="main"></div>
    <div id="sidebar"></div>
</div>

编辑

---

然而，基于小提琴，你可以诚实地给包装上绿色的背景，让它看起来就像边栏一样高。不过，我不知道这是否符合你的实际需要。查看另一个提琴：

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

主要内容
边栏
#主要
{
背景色：#F0FFFF；
}
#内容
{
宽度：75%；
浮动：左；
背景色：#FFF0FF；
}

Give height to sidebar div。Give height 100%根本不起作用：不是100%。Give in

px

。感谢robooneus，你的想法很棒，但是当sidebar比主要内容长并且溢出时，我遇到了新问题。你有什么解决办法吗@嗯。。。我得考虑一下。但我的直觉告诉我，在使用上述方法时，没有办法动态地确保这一点。最简单的方法是在

#main

上设置一个稍微合理的

min height

。但如果你有很长的边栏内容，这可能会中断。否则，您需要在页面加载时使用JS设置最小高度。

<div class="content-wrap">
    <div id="main"></div>
    <div id="sidebar"></div>
</div>

.content-wrap {
    float:left;
    width:100%;
    position:relative;
}

#sidebar {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:25%;
}

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

#main
{
  background-color: #F0FFFF;     
}

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