2

サイドバーがヘッダーとフットの間の高さを埋めるようにしようとしています。ご覧のとおり、フッターの背後にあります。フッターの上部で停止させたいと思います。どんな助けでも素晴らしいでしょう！

デモ: http://www.jsfiddle.net/pEbhK/

HTML:

<div class="header">
        <h2>Development Area</h2>
</div>
<div class="sidebar">
        <h2>Current Projects</h2>
    <ul>
        <li>iCalendar</li>
        <li>MyBand - Student Center</li>
    </ul>
        <h2>Future Projects</h2>
    <ul>
        <li>Mobile Application</li>
        <li>RSS Feed</li>
    </ul>
</div>
<div class="clear"></div>
<div class="footer">&copy; 2013</div>

CSS:

html, body, h1, h2 {
    margin:0px;
    padding:0px;
}
.clear {
    clear:both;
}
.header {
    display:inline-block;
    width:100%;
    background:#ABBFF2;
    height:100px;
    border-bottom: 5px solid #7F9DEB;
    text-align:center;
}
.header h2 {
    padding-top:38px;
}
.sidebar {
    position: fixed;
    height:100%;
    width:250px;
    background:#ABBFF2;
    border-right:5px solid #7F9DEB;
    float:left;
}
.sidebar h2 {
    text-align:center;
}
.footer {
    position:fixed;
    display:inline-block;
    bottom:0px;
    width:100%;
    height:30px;
    border-top:5px solid #7f9deb;
    text-align:center;
}
4

3 に答える 3

5

試してheight:calc(100% - 140px)みる.sidebar

.sidebar {
    position: fixed;
    height:calc(100% - 140px);
    width:250px;
    background:#ABBFF2;
    border-right:5px solid #7F9DEB;
    float:left;
}

更新された jsFiddle ファイル

于 2013-09-04T13:31:52.070 に答える
1

これを行う非 calc() 方法...

サイドバーとフットには がposition: fixedあるため、ビューポートに対して配置されます。

次の CSS を使用して、サイドバーのサイズを変更できます。

.sidebar {
    position: fixed;
    top: 105px;
    bottom: 35px;
    left: 0px;
    width:250px;
    background:#ABBFF2;
    border-right:5px solid #7F9DEB;
}

オフセットの値topは、ヘッダーの高さ + ボーダーの 5px です。同様に、bottomオフセットはフッターの高さ + ボーダーの 5px です。

デモを参照してください: http://jsfiddle.net/audetwebdesign/Lfpxq/

注:コンテンツのオーバーフローの問題を防ぐために、サイドバーに最小の高さを追加することをお勧めします。calc()メソッドを使用する場合も同じ問題が発生すると思います。

于 2013-09-04T13:48:10.287 に答える