0

サイドバーが 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;
}
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 に答える