我试图让侧边栏填充页眉和脚之间的高度。正如你所看到的那样,它会落后于页脚。我希望它停在页脚的顶部。任何帮助都会很棒!
演示于: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">© 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;
}
答案 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)
您的侧边栏和脚有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
中的.footerbackground-color: #fff;