0

ページに 2 つの divがleftpartありrightpart、次の css があります。

.leftpart{ 
       width:280px; 
       background:#0054a6; 
       color:#fff; 
       padding-top:40px; 
       height:100%; 
       min-height:637px; 
       box-shadow:3px 3px 10px #bebebe; 
       position:relative;
}
.rightpart{ 
       width:75%; 
       padding-left:10px;
}

このサイドバー (左部分) をページの最後 (一番下) まで表示したいです。高さを 100% に設定しましたが、ブラウザーを最小化すると、青色の背景が表示される代わりに、バーの下に空白が表示されます。つまり、高さを 100% とはしません。どうすればそれを手に入れることができますか？

4

1 に答える 1

1

フルレングスのサイドバーの場合、最善の策はおそらく古いフェイクカラム方式です。これは CSS で行うこともできますが、おそらくこちらの方が簡単です。

基本的に、列の背景が細長いストリップになっている画像が必要です。次に、これを背景画像として親 div に追加すると、完全な高さの列として機能します。

例えば。

.container {
    background: url(your_image) repeat-y left top;
}

<div class="container">
    <div class="sidebar">SIDEBAR</div>
    <div class="content">CONTENT</div>
</div>

ここで詳細を読むことができます - http://www.alistapart.com/articles/fauxcolumns/

CSS でこれを試したい場合は、負のマージンのトリックを試すことができます。

オーバーフローを非表示に設定してコンテナーを設定し、各 div に負の margin-bottom と正の padding-bottom を追加します。

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        SIDEBAR
   </div>
   <div class="col2">
        CONTENT
   </div>
</div>
于 2012-07-25T10:07:11.413 に答える