1
我一直在努力工作几个小时,并尝试了所有我能想到/发现的工作。我希望我的网站的内容和侧边栏div扩展到粘性页脚。将2 divs延伸到页面底部
与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: auto !important;
height: 100%;
margin: 0 5%;
}
#content,
#sidebar {
position: relative;
padding: 20px;
background: #ffffff;
min-height: 100% !important;
height: 100% !important;
display: block;
position: relative;
overflow: auto;
}
#content {
min-width: auto;
width: auto;
margin: 0 0 auto 0;
}
#sidebar {
margin: 0 0 auto 2% !important;
width: 150px;
float: right;
}
.footer, .push {
clear: both;
height: 30px;
}
#footer {
display: block;
bottom: 0px;
position: relative;
width: 100%;
margin: 0px;
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>
<div id="content">
content
</div><!--content-->
</div><!--contentwrapper-->
<div id="push"></div>
<div id="footer">
footer
</div> <!--footer-->
</div><!--container-->
</body>
</html>
该网站是http://hoskyns50.co.uk如果你想看到的原始代码。我正在适应现有的Wordpress布局。提前致谢。
非常感谢你!阿格不敢相信那很简单。 它确实搞砸了我的页脚,尽管如此,我怎么才能把它粘到底部呢? – user2561163
@ user2561163我编辑了我的答案,试图修复您的页脚。 :) – Timber
我宁愿没有总是可见的页脚,像一个菜单,在固定的位置......但无论如何感谢 我现在有问题,内容div并不总是足够大,以扩展文本和创建一个滚动条。如果我设置了 溢出:隐藏; 那么内容并不总是可见的。 – user2561163