作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个基于网格系统的网站,因此所有列都 float 到左侧。
这意味着主要的 .content
div 没有高度,因为所有包含它的 div 都是 float 的并且在 HTML 流之外,所以 body 没有高度。
我已经搜索并尝试过类似 the push div to stick footer 的东西, 或 jQuery 代码 abobe:
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( 'footer' ).css( 'margin-top', height_diff );
}
});
这些尝试都没有给出积极的结果,因为 body 根本没有高度,即使它在视觉上充满了列,即使将它们放在显示为 block 的 .row
div 中,问题依然存在。
解决这个问题的最佳方法是什么?
HTML:
<div class="container main clearfix">
<div class="grid_12">
<p>
970
</p>
</div>
<!-- end .grid_12 -->
<div class="clear"></div>
<div class="grid_1">
<p>
57
</p>
</div>
<!-- end .grid_1 -->
<div class="grid_11">
<p>
887
</p>
</div>
<!-- end .grid_11 -->
<div class="clear"></div>
<div class="grid_2">
<p>
140
</p>
</div>
<!-- end .grid_2 -->
</div>
<footer>thisisfoooooter</footer>
CSS:
body {min-width: 996px;}
.container.main{
margin-top:100px;
}
.container {
margin-left: auto;
margin-right: auto;
width: 996px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display: inline;
float: left;
margin-left: 13px;
margin-right: 13px;
}
.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
position: relative;
}
.alpha {margin-left: 0;}
.omega {margin-right: 0;}
.container .grid_1 {width: 57px;}
.container .grid_2 {width: 140px;}
.container .grid_3 {width: 223px;}
.container .grid_4 {width: 306px;}
.container .grid_5 {width: 389px;}
.container .grid_6 {width: 472px;}
.container .grid_7 {width: 555px;}
.container .grid_8 {width: 638px;}
.container .grid_9 {width: 721px;}
.container .grid_10 {width: 804px;}
.container .grid_11 {width: 887px;}
.container .grid_12 {width: 970px;}
.container .push_1 {left: 83px;}
.container .push_2 {left: 166px;}
.container .push_3 {left: 249px;}
.container .push_4 {left: 332px;}
.container .push_5 {left: 415px;}
.container .push_6 {left: 498px;}
.container .push_7 {left: 581px;}
.container .push_8 {left: 664px;}
.container .push_9 {left: 747px;}
.container .push_10 {left: 830px;}
.container .push_11 {left: 913px;}
.container .pull_1 {left: -83px;}
.container .pull_2 {left: -166px;}
.container .pull_3 {left: -249px;}
.container .pull_4 {left: -332px;}
.container .pull_5 {left: -415px;}
.container .pull_6 {left: -498px;}
.container .pull_7 {left: -581px;}
.container .pull_8 {left: -664px;}
.container .pull_9 {left: -747px;}
.container .pull_10 {left: -830px;}
.container .pull_11 {left: -913px;}
img, object, embed { max-width: 100%;}
img { height: auto; }
p {
border: 1px solid #666;
overflow: hidden;
padding: 15px 0;
text-align: center;
margin: 10px 0;
background: #d12421;
color:white;
}
最佳答案
我不明白你的问题实际上是什么,如果你想要一个粘性页脚分开 whcch 应该固定在屏幕的底部但是对于粘性页脚使用下面的 CSS 到页脚
CSS
要使页脚始终位于页面底部并使其即使在滚动页面时也可用,请使用以下 css
页脚{
位置:固定;
底部:0;
页脚{
position:absolute;
}
以上将使您的页脚保持在您的 container
div 高度旁边。For your undertanding i have set the height for the
container
div in the Fiddle
关于css - 使用 float 网格模式内容将页脚贴在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29965285/
我是一名优秀的程序员,十分优秀!