是否可以在我的布局中添加一個具有純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>