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

Question

经过无数小时的尝试之后，我终于找到了一种方法，该方法可以在不依靠JavaScript的情况下实现具有可变高度的粘性页脚。 无论我向.footer添加了多少内容，无论.content div中是否有足够的内容将其向下推，该内容仍将停留在视口的底部。 我尝试过的所有javascript解决方案都无法像这样顺利进行，如果可能，我想继续使用此方法。

我的问题是，由于各种移动浏览器存在问题，因此不接受overflow-x:hidden; 根据body标签的规则，我现在必须在布局中添加包装器。 这样可以解决移动浏览器的问题，但是不幸的是，当.content div为空时， .footer不会粘在视口底部。

我当然试图将一些CSS规则从主体移到包装器，以查看是否有效，但是我没有取得任何成功。 有没有解决的办法？

这是两个展示问题的jsFiddle示例，一个带有.wrapper ，另一个没有.wrapper的示例。

示例1：不使用包装器（Sticky页脚有效） – https://jsfiddle.net/v5h2f5wd/

示例2：使用包装程序（Sticky页脚不起作用） – 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这非常简单。 完全不需要定位。

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

 <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 

Answer 2

这是一个flexbox解决方案。

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

使用此解决方案，页脚的高度是动态的，这使您不必再更改样式表中的选择器。

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

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

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

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

无需执行所有的定位（不必要的）和宽度声明（这些元素已经占据了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

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <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>