我一直在努力让我的网站有 2 个 div,这些 div 延伸到页面底部(到页脚)并且没有滚动条。例如:http ://hoskyns50.co.uk/about-hoskyns-50th/我想删除滚动条并使 div 扩展页面(就像这个网站一样),内容和侧边栏 div 的白色背景可见从页面到页脚的整个过程。
相关的CSS:
body, html {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
min-height: 100%;
height: 100%;
line-height: 1;
}
body {
min-height: 100%;
height: 100%;
font-family: 'Century Gothic', sans-serif;
font-size: 13px;
line-height: 21px;
background: #e0d6b6 url(images/bg.png) repeat-x;
color: #2f2f2f;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
.container {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
background: transparent;
margin: 0 auto -30px;
padding: 0px;
}
.contentwrapper {
position: relative;
display: block;
min-height: 100%;
height: 100%;
margin: 0 5%;
}
#content, #sidebar {
position: relative;
padding: 20px;
background: #ffffff;
min-height: 100% !important;
height: 100%;
display: block;
position: relative;
overflow: auto;
margin-bottom: auto;
}
#content {
min-width: auto;
width: auto;
}
#sidebar {
margin-left: 2% !important;
width: 150px;
float: right;
}#footer, #push {
clear: both;
}
#footer {
display: block;
bottom: 0px !important;
position: relative;
width: 100%;
margin: 0;
padding: 10px 0;
font-size: 12px;
border: none;
background: #808080;
color: #c4c4c4;
vertical-align: middle;
}
相关的html
<html>
<head>
</head>
<body>
<div class="container">
<div class="contentwrapper">
<div id="sidebar">
sidebar
</div><!--sidebar-->
<div id="content">
content
</div><!--content-->
</div><!--contentwrapper-->
<div id="push"></div>
<div id="footer">
footer
</div> <!--footer-->
</div><!--container-->
</body>
</html>