Question

无数小时试图找到一种方法来实现具有流体高度的粘性页脚而不使用javascript，我终于找到了一种方法。无论我添加到.footer的内容有多少，它都会一直停留在视口的底部，无论.content div中是否有足够的内容将其推下。我试过的所有javascript解决方案都没有这么顺利，我想尽可能继续使用这种方法。

我的问题是，由于各种移动浏览器不接受overflow-x:hidden;标记上的body规则的问题，我现在不得不在我的布局中添加包装。这解决了移动浏览器问题，但不幸的是，当.footer div为空时，.content不会停留在视口底部。

我当然试图将几个CSS规则从正文移动到包装器，看看它是否有效，但我还没有取得任何成功。有办法解决这个问题吗？

以下是两个用于显示问题的jsFiddle示例，一个包含.wrapper而另一个没有。

示例1：没有包装（粘性页脚工作） - https://jsfiddle.net/v5h2f5wd/

示例2：使用包装器（粘性页脚不起作用） - https://jsfiddle.net/v5h2f5wd/1/

示例2中的代码：

<div class="wrapper">
    <header class="header"></header>
        <div class="content">
            <button>Click here to insert content into footer.</button>
        </div>
    <footer class="footer"></footer>
</div>

html {
    position:relative; 
    height:100%;
}

body {
    position:relative;
    width:100%;
    min-height:100%;
    margin:0; 
    padding:0; 
    overflow-x:hidden;
    background-color:#eee;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.header {
    position:absolute;
    width:100%;
    height:55px;
    background-color:#fff;
}

.content {
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    width:100%;
    height:auto;
    background-color:pink;
}

button { 
    margin:65px 0 0 10px;
} 

.footer {
    width:100%; 
    background-color:#fff;
    padding:25px 0;
}

Answer 1

使用flexbox非常简单。根本不需要定位。

＆＃13;

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

header {
  background: pink;
}

footer {
  background: red;
  padding: 1em;
}

main {
  flex: 1;
  background: lightgreen;
}

＆＃13;

<div class="wrapper">
  <header>HEADER</header>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique facere consequatur officiis cupiditate sed blanditiis magni sequi ducimus cum illum repellat ab nostrum excepturi aperiam dolor repudiandae mollitia, eius deleniti.</p>
  </main>
  <footer>FOOTER</footer>
  </div

＆＃13;

Answer 2

这是一个flexbox解决方案。

看起来你正在尝试做类似的事情。此设置中的关键点是height: 100%;元素上的html（继承自视口高度），min-height: 100%;元素上的body（继承自html高度）和flex-grow: 1;元素上的main（告诉元素占用容器元素中的剩余空间）。

使用此解决方案，页脚的高度是动态的，这样可以省去在样式表中更改选择器时必须更新的麻烦。

解决方案中的JS仅用于演示目的。

＆＃13;

var btnC   = document.querySelector( '.btn-c' );
var btnF   = document.querySelector( '.btn-f' );
var main   = document.querySelector( 'main' );
var footer = document.querySelector( 'footer' );

function addContent( target, str ) {

    var p = document.createElement( 'p' );

    p.innerHTML = str;

    target.appendChild( p );

}

btnC.addEventListener( 'click', function ( e ) {

  for ( var i = 0, len = 5; i < len; i++ ) {
    addContent( main, 'Content' );
  }

} );

btnF.addEventListener( 'click', function ( e ) {
    addContent( footer, 'Footer' );  
} );

＆＃13;

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
header {
  background-color: gold;
}
main {
  flex-grow: 1;
  background-color: skyblue;
}
footer {
  background-color: indianred;
}
.wrap {
 display: flex;
 flex-direction: column;
 min-height: 100%;
}

＆＃13;

<div class="wrap">
  <header>
    Header
  </header>
  <main>
    <p>
      Content
    </p>
    <button class="btn-c">Add to Content</button>
    <br>
    <button class="btn-f">Add to Footer</button>
  </main>
  <footer>
    Footer
  </footer>
</div>

＆＃13;

无需进行所有定位（不必要的）和宽度声明（这些元素已占据100％宽度，因为它们是块级元素）。

Answer 3

所以我所做的只是稍微改变了你在JSFiddle中的CSS，你之所以没有工作的原因是你需要将相同的结构样式应用于父容器，因为它们需要是相同。

为了让页脚粘到底部，我只使用了align-self flex属性将它放在父flex元素的末尾。

希望这对你有用。

html {
  position:relative; 
  height:100%;
}
body, 
.wrapper{
  height: 100%; /* this makes sure that the body matches the window and the wrapper matches the body. */
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column
}
body {
  position:relative;
  margin:0; 
  padding:0; 
  overflow-x:hidden;
  background-color:#eee;
}

.header {
  position:absolute;
  width:100%;
  height:55px;
  background-color:#fff;
}

.content {
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  width:100%;
  height:auto;
  background-color:pink;
}

button { 
  margin:65px 0 0 10px;
}

.footer {
  width: 100%;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end; /* This puts it at the end of the parent flex element. */
  background-color:#fff;
  padding:25px 0;
}

Answer 4

如果您想将它与包装一起使用，也许这对您有用。

contextlib.nested

$(document).ready(function(){
    $("button").click(function(){
        $(".footer").append("Some text to make me taller.");
    });
});

html {
  position:relative; 
	height:100%;
  height: 100%; margin: 0px; padding: 0px;
}

body {
	position:relative;
  height: 100%; margin: 0px; padding: 0px;
	width:100%;
	min-height:100%;
  margin:0; 
  padding:0; 
	overflow-x:hidden;
	background-color:#eee;
	display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
    flex-direction: column;
    margin:0; 
  padding:0; 
  height:100%;
}

.wrapper {
  height: 100%;
}

.header {
  position:absolute;
	width:100%;
	height:55px;
  background-color:#fff;
}

.content {
  -webkit-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	width:100%;
	height:auto;
  background-color:pink;
  height: 100%;
}

button { 
  margin:65px 0 0 10px;
}

.footer {
  width:100%;	
	background-color:#fff;
  padding:25px 0;
  bottom: 0;
  position:absolute;
}

我可以在布局中添加一个包含纯CSS动态粘性页脚的包装器吗？

4 个答案: