使用浮动网格模式内容将页脚贴在底部

Question

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

这意味着主要 .content div 没有高度，因为它包含的所有 div 都是浮动的并且不在 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 );
    }    
});

None 的尝试给出了肯定的结果，因为 body 根本没有高度，即使它在视觉上充满了列，即使这些被放置在 .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;
}

Answer 1

我不明白你的问题实际上是什么，如果你想要一个粘性页脚分开 whcch 应该固定在屏幕底部但是对于粘性页脚使用以下 CSS 到页脚

CSS

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

footer{ position:fixed; bottom:0; }

DEMO

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

For your undertanding i have set the height for the container div in the Fiddle

DEMO

使用浮动网格模式内容将页脚贴在底部

Stick footer on bottom with a floating grid schema content

css

grid-layout

css-float