Machen Sie innere div, um sowohl Seitengröße und Inhalt passen

Question

Ich habe drei divs in der Seite namens Header, Inhalt und Fußzeile. Header wird oben angezeigt und hat kein Problem.

Die folgende CSS funktioniert nicht richtig mit inneren div (Content), um seinen Inhalt und Bildschirmanzeige anzupassen.

Während ich möchte

1. innere div erweitern, um Bildschirmgröße und Fußzeile zu füllen bleiben unten.
2. Halten divs um
3. Füllinhalt

ich versucht habe viele CSS-Lösungen, aber nichts funktioniert immer perfekt fit div an Seite und beide Inhalt.

.header { 
    background-color: #bf4b4b ; 
    /*margin-left: 14%;*/ 
    top: 0; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 
    width: 100%; 
    height: 80px; 
} 

.content { 
    background-color: #ffffff; 
    margin-left: 25%; 
    margin-top: 5px; 
    float: left; 
    width: 46%; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 

    border-radius: 25px; 
    padding: 20px; 

    flex: 1 1 auto; 
} 

.footer { 
    background-color: #243b82 ; 
    /* margin-left: 14%; 
    float: left;*/ 
    margin-top: 5px; 
    width: 100%; 
    height: 80px; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 
    color:white; 
    text-align: center; 

    /* 
    display:inline-block; 
    vertical-align:middle; 
    */ 
display: inline-block; 
vertical-align: bottom; 


} 

Bitte beachten Sie seine Wordpress Theme und WooCommerce Seiten müssen innerhalb des inneren div

Answer 1

ich gelöst mit overflow Eigentum und sticky footer wie folgt:

.header { 
    background-color: #bf4b4b ; 
    top: 0; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 
    width: 100%; 
    height: 80px; 
    position: fixed; 
    right: 0; 
    left: 0; 
} 

.content { 
    background-color: #ffffff; 
    margin-left: 25%; 
    margin-top: 5%; 
    width: 46%; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 
    border-radius: 25px; 
    padding: 20px; 
    overflow:auto; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 

} 

.footer { 
    background-color: #243b82 ;  
    width: 100%; 
    height: 80px; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 
    color:white; 
    text-align: center; 
} 

Answer 2

Kontrolle dieses jfiddle und sagen Sie mir zeigen, wenn es, wie Sie danke wollte arbeitet.

body{ 
    margin:0px; 
} 

.header{ 
    background-color:#bf4b4b; 
    height:80px; 
    width:100%; 
    position:fixed; 
    top:0px; 
    left:0px; 
} 

.content{ 
    height:100vh; 
    padding:80px 0px; 
    background-color:#FFFFFF; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.footer{ 
    background-color:#243b82; 
    height:80px; 
    width:100%; 
    position:fixed; 
    bottom:0px; 
    left:0px; 
} 

Answer 3

Flex-Display könnte hier eine gute Option sein. Es sieht so aus, als ob du diesen Pfad bereits begonnen hast. Das Hinzufügen eines umgebenden Containers mit einer minimalen Höhe des vollen Fensters "100vh" könnte das erreichen, wonach Sie suchen. Lassen Sie mich wissen, wie das funktioniert:

<div class="container"> 
    <div class="header"> 
    </div> 
    <div class="content"> 
    </div> 
    <div class="footer"> 
    </div> 
</div> 

.container { 
    display: flex; 
    width: 100%; 
    min-height: 100vh; 
    flex-direction: column; 
} 
.header { 
    background-color: #bf4b4b ; 
    /*margin-left: 14%;*/ 
    top: 0; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 
    width: 100%; 
    height: 80px; 
} 

.content { 
    background-color: #ffffff; 
    margin-left: 25%; 
    margin-top: 5px; 
    float: left; 
    width: 46%; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 

    border-radius: 25px; 
    padding: 20px; 

    flex: 1 1 auto; 
} 

.footer { 
    background-color: #243b82 ; 
    /* margin-left: 14%; 
    float: left;*/ 
    margin-top: 5px; 
    width: 100%; 
    height: 80px; 
    border-width: 0.1em; 
    border-color: #999; 
    border-style: solid; 
    color:white; 
    text-align: center; 

    /* 
    display:inline-block; 
    vertical-align:middle; 
    */ 
display: inline-block; 
vertical-align: bottom; 


} 

http://codepen.io/amishstripclub/pen/gwNGXw?editors=1100