footer, die den ganzen Boden füllen

Question

Ich möchte den gesamten freien Bodenraum (weiße Farbe) im Fall von Display mit einer großen Breite (größer als Inhalt) füllen, so wie man css3 Stil dafür einstellen?

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

Zuerst Zugabe margin: 0 zum html/body-Tag wird Ihnen diese

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>

Zweitens eine wrapper mit display: flex mit einem min-width: 100vh Hinzufügen und geben die .footerflex: 1 geben Ihnen diese

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

Klingt wie Sie eine klebrige Fußzeile möchten.

funktioniert gut.