Wie man mittleren div bekommt, füllen Sie vertikalen Raum?

Ich bin ziemlich neu im Webdesign und versuche Seitenlayouts zu testen. Ich habe ein Layout mit einer Kopfzeile, links schwebend div, rechts schwebend div, Körper und Fußzeile. Was ich versuche zu tun ist, dass das "body" div den vertikalen Raum zwischen den floating divs füllt. Und wenn möglich, wie könnte ich das gesamte Layout dazu bringen, den vertikalen Raum des Bildschirms zu füllen? Ich habe ein Bild unten auf der Seite eingefügt, ich versuche, den ganzen gekritzelten Platz zu füllen.Wie man mittleren div bekommt, füllen Sie vertikalen Raum?

Hier ist mein HTML-Code,

div.container { 
 
    width: 100%; 
 
    border: solid 1px; 
 
} 
 
header, 
 
footer { 
 
    background-color: rgb(000, 000, 000); 
 
    color: rgb(255, 255, 255); 
 
    padding: 10px; 
 
    text-align: center; 
 
    clear: left; 
 
} 
 
#nav { 
 
    background-color: rgba(50, 50, 50, 0.8); 
 
    float: left; 
 
    width: 150px; 
 
    padding: 10px; 
 
} 
 
#body { 
 
    background-color: rgba(100, 100, 100, 0.8); 
 
    overflow: hidden; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 
#right { 
 
    background-color: rgba(50, 50, 50, 0.8); 
 
    float: right; 
 
    max-width: 150px; 
 
    padding: 10px; 
 
}

<body> 
 
    <div class="container"> 
 
    <header> 
 
     <h1>Title</h1> 
 
    </header> 
 
    <div id="nav"> 
 
     <p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin 
 
     ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies 
 
     aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p> 
 
    </div> 
 
    <div id="right"> 
 
     <p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin 
 
     ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies 
 
     aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p> 
 
    </div> 
 
    <div id="body"> 
 
     <p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin 
 
     ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies 
 
     aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p> 
 
    </div> 
 
    <footer>Bottom</footer> 
 
    </div> 
 
</body> 
 

 
</html>

What i'm trying to figure out.

Quelle

2016-10-02 Yama

es funktioniert nur https://jsfiddle.net/xwsxupv0/ ... was genau Sie wollen mit :) –

Ich möchte, dass die "Körper" div den Raum zwischen den beiden Floating Divs vollständig ausfüllen. – Yama

Sie fast fertig :) –

dieses CSS Versuchen:

div.container { 
    width:100%; 
    border:solid 1px; 
    } 
    header, footer { 
    background-color:rgb(000,000,000); 
    color:rgb(255,255,255); 
    padding:10px; 
    text-align:center; 
    clear:left; 
    } 
    #nav { 
    background-color:rgba(50,50,50,0.8); 
    float:left; 
    width:150px; 
    padding:10px; 
    } 
    #body { 
    background-color:rgba(100,100,100,0.8); 
    overflow:hidden; 
    padding:10px; 
    text-align:center; 
    } 
    #right { 
    background-color:rgba(50,50,50,0.8); 
    float:right; 
    max-width:150px; 
    padding:10px; 
    }

https://jsfiddle.net/xwsxupv0/1/

Quelle

2016-10-02 23:16:20

Wenn der # # Körper mehr Inhalt haben wird - entfernen Sie die 'Höhe: 100vh' in CSS. Und mache beide Floating Divs 'position: fixed'. Jetzt werden Sie ein besseres Design bekommen. (rechts und links fixiert, Scroll-Körper div) –

Wie man mittleren div bekommt, füllen Sie vertikalen Raum?

Antwort

Verwandte Themen