Div高度100%格式化问题

时间:2013-09-04 13:28:38

标签: css3 html

我试图让侧边栏填充页眉和脚之间的高度。正如你所看到的那样,它会落​​后于页脚。我希望它停在页脚的顶部。任何帮助都会很棒!

演示于: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;
}

3 个答案:

答案 0 :(得分:5)

height:calc(100% - 140px)

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

<强> updated jsFiddle File

答案 1 :(得分: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()方法时会出现同样的问题。

答案 2 :(得分:-1)

或者将此内容写入css

中的.footer
background-color: #fff;