0

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

http://jsfiddle.net/PnsDD/

我不想实现假列技术，因为它需要背景图像。而且我无法实现一些想法，display因为为了有一个粘性页脚，我已经将一些显示更改为tableor 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;
}
4

2 回答 2

2

您可以将包装器添加到#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/

于 2013-08-29T07:57:01.620 回答
0

不确定您是否可以强制侧边栏的高度与它旁边的浮动 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; 
}
于 2013-08-29T08:10:06.543 回答