填充整個底部的頁腳

Question

我想填充整個自由底部空間（白色）在寬度大於內容的情況下顯示的情況下如何設置css3樣式來執行此操作？

CSS：

.footer { 
    background-color: #FFFFFF; 
    line-height: 20px; 
    /*border-top: 1px solid #DDDDDD;*/ 
    overflow: hidden; 
} 
.footer .copyright { 
    font-family:Lato; 
    color: #f6f6f6; 
    padding: 10px 15px; 
    margin: 15px 3px; 
    line-height: 20px; 
    text-align: center; 
    font-size:0.9em; 
    font-weight:400; 
} 
.footer-color-black, 
.footer-transparent { 
    background-color: #595324; 
    color: #DDDDDD; 
    text-align:center; 
} 

https://jsfiddle.net/3re9wbr2/1/

Answer 1

首先，加入margin: 0到HTML/body標籤會給你這個

html, 
 
body { 
 
    margin: 0; 
 
} 
 

 
.footer { 
 
    background-color: #FFFFFF; 
 
    line-height: 20px; 
 
    /*border-top: 1px solid #DDDDDD;*/ 
 
    overflow: hidden; 
 
} 
 

 
.footer .copyright { 
 
    font-family: Lato; 
 
    color: #f6f6f6; 
 
    padding: 10px 15px; 
 
    margin: 15px 3px; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    font-size: 0.9em; 
 
    font-weight: 400; 
 
} 
 

 
.footer-color-black, 
 
.footer-transparent { 
 
    background-color: #595324; 
 
    color: #DDDDDD; 
 
    text-align: center; 
 
}

<div class="section"> 
 
    <div class="container"> 
 
    <div class="title-area"> 
 
     <div class="gallerygrid"> 
 
     <h5>content ldosalodaslodlsoalodslaodasol</h5> 
 
     <h5>content ldosalodaslodlsoalodslaodasol</h5> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<footer class="footer footer-big footer-color-black" data-color="black"> 
 
    <div class="copyright"> 
 
    © 
 
    <script> 
 
     document.write(new Date().getFullYear()) 
 
    </script> · Lorem Ipsum · All Copyright reserved 
 
    </div> 
 
</footer>

其次，使用display: flex有min-width: 100vh添加wrapper並給予.footerflex: 1會給你這個

html, 
 
body { 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.section { 
 
} 
 

 
.footer { 
 
    flex: 1; 
 
    background-color: #FFFFFF; 
 
    line-height: 20px; 
 
    /*border-top: 1px solid #DDDDDD;*/ 
 
    overflow: hidden; 
 
} 
 
.footer .copyright { 
 
    font-family: Lato; 
 
    color: #f6f6f6; 
 
    padding: 10px 15px; 
 
    margin: 15px 3px; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    font-size: 0.9em; 
 
    font-weight: 400; 
 
} 
 
.footer-color-black, 
 
.footer-transparent { 
 
    background-color: #595324; 
 
    color: #DDDDDD; 
 
    text-align: center; 
 
}

<div class="wrapper"> 
 
    <div class="section"> 
 
    <div class="container"> 
 
     <div class="title-area"> 
 
     <div class="gallerygrid"> 
 
      <h5>content ldosalodaslodlsoalodslaodasol</h5> 
 
      <h5>content ldosalodaslodlsoalodslaodasol</h5> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <footer class="footer footer-big footer-color-black" data-color="black"> 
 
    <div class="copyright"> 
 
     © 
 
     <script> 
 
     document.write(new Date().getFullYear()) 
 

 
     </script> · Lorem Ipsum · All Copyright reserved 
 
    </div> 
 
    </footer> 
 
</div>

Answer 2

聽起來像是你想有一個粘頁腳。

Ryan Fait's method效果很好。