將頁腳推到頁面底部，除非有內容將其推下而沒有固定的高度

我正在尋找不帶position: absolute; bottom: 0或position: fixed的示例。將頁腳推到頁面底部，除非有內容將其推下而沒有固定的高度

下面是我有的佈局的一個例子。

如果沒有足夠的內容推下頁腳，我想將頁腳定位在頁面的底部，因此我正在尋找以某種方式將頁腳推到底部的min-height。

.application-layout__container { 
 
    margin: 0 auto; 
 
    padding: 0 15px; 
 
} 
 

 
.button__left { 
 
    float: left; 
 
} 
 

 
.button__right { 
 
    float: right; 
 
} 
 

 
.application-layout__button-group { 
 
    clear: both; 
 
} 
 

 
.page-footer { 
 
    background-color: #0065bd; 
 
    color: #fff; 
 
    margin-top: 42px; 
 
} 
 

 
.page-footer nav { 
 
    font-weight: bold; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
    padding: 21px 0; 
 
} 
 

 
.page-footer nav a { 
 
    color: #fff; 
 
} 
 

 

 
}

<html> 
 

 
    <body> 
 
    <div> 
 
     <div class="application-layout__container"> 
 
     <div class="application-layout__header"> 
 
      <h1> 
 
     Application 
 
     </h1> 
 
     </div> 
 
     <div class="application-layout__body"> 
 
      <form> 
 
      <div class="form-group"> 
 
       <label for="input">Input</label> 
 
       <input id="input" type="text" /> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     <div class="application-layout__button-group"> 
 
      <div class="button__left"> 
 
      <button type="button"> 
 
       Back 
 
      </button> 
 
      </div> 
 
      <div class="button__right"> 
 
      <button type="button"> 
 
       Next 
 
      </button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="page-footer"> 
 
     <nav> 
 
     <a href="one">one</a> 
 
     <a href="two">two</a> 
 
     <a href="three">three</a> 
 
     <a href="four">four</a> 
 
     </nav> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2017-10-28 dagda1

你能在PX定義高度頁腳？ –

儘量避免定義固定高度 – dagda1

「位置」有什麼問題 – zevee

-2

我看不出使用position: absolute和bottom: 0是什麼問題。

.application-layout__container { 
 
    margin: 0 auto; 
 
    padding: 0 15px; 
 
} 
 

 
.button__left { 
 
    float: left; 
 
} 
 

 
.button__right { 
 
    float: right; 
 
} 
 

 
.application-layout__button-group { 
 
    clear: both; 
 
} 
 

 
.page-footer { 
 
position: absolute; 
 
bottom: 0; 
 
width: 100%; 
 
    background-color: #0065bd; 
 
    color: #fff; 
 
    margin-top: 42px; 
 
} 
 

 
.page-footer nav { 
 
    font-weight: bold; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
    padding: 21px 0; 
 
} 
 

 
.page-footer nav a { 
 
    color: #fff; 
 
} 
 

 

 
}

<html> 
 

 
    <body> 
 
    <div> 
 
     <div class="application-layout__container"> 
 
     <div class="application-layout__header"> 
 
      <h1> 
 
     Application 
 
     </h1> 
 
     </div> 
 
     <div class="application-layout__body"> 
 
      <form> 
 
      <div class="form-group"> 
 
       <label for="input">Input</label> 
 
       <input id="input" type="text" /> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     <div class="application-layout__button-group"> 
 
      <div class="button__left"> 
 
      <button type="button"> 
 
       Back 
 
      </button> 
 
      </div> 
 
      <div class="button__right"> 
 
      <button type="button"> 
 
       Next 
 
      </button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="page-footer"> 
 
     <nav> 
 
     <a href="one">one</a> 
 
     <a href="two">two</a> 
 
     <a href="three">three</a> 
 
     <a href="four">four</a> 
 
     </nav> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2017-10-28 14:33:52 zevee

因爲我想要的內容被推下來，如果有不止一個屏幕充滿內容 – dagda1

你是什麼意思的「推下」，@ dagda1？ – zevee

如果上面有很多內容，我希望它的行爲正常 – dagda1

將頁腳推到頁面底部，除非有內容將其推下而沒有固定的高度

回答

相關問題