Question

我有一个基于网格系统的网站，因此所有列都浮动到左侧。

这意味着主.content div没有高度，因为它的所有包含div都是浮动的并且不在HTML流中，所以主体没有高度。

我搜索并尝试了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 );
    }    
});

这些尝试都没有给出正面结果，因为即使在视觉上充满了列的情况下，身体也没有高度，即使这些被放置在显示为块的.row div内，问题仍然存在。 / p>

解决这个问题的最佳方法是什么？

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;
}

Answer 1

如果你想要一个固定在屏幕底部的粘性页脚，但是对于stickey页脚使用以下CSS来页脚

<强> CSS

要将页脚始终放在页面底部并使其可用，即使您滚动页面也请使用以下css

footer{ position:fixed; bottom:0; }

DEMO

要将页脚放置在页面底部并仅在用户移动到页面底部时才能看到，请使用下面的css footer{ position:absolute; } 以上内容会将您的页脚放在container div高度旁边。

为了你的承诺，我已经设定了小提琴中container div的高度

DEMO

使用浮动网格架构内容将页脚粘贴在底部

1 个答案: