如何讓中間div填滿垂直空間？

我對網頁設計相當陌生，我試圖測試出頁面佈局。我有一個標題，左浮動div，右浮動div，正文和頁腳的佈局。我想要做的是讓「body」div填充浮動div之間的垂直空間。而且，如果可能的話，我怎樣才能讓整個佈局填滿屏幕的垂直空間？我在頁面的底部添加了一張圖片，我試圖填寫所有潦草的空間。如何讓中間div填滿垂直空間？

這裏是我的html代碼，

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.

來源

2016-10-02 Yama

其工作正常只有https://jsfiddle.net/xwsxupv0/ ...你到底想做什麼:) –

我想「body」div完全填充兩個浮動div之間的空間。 – Yama

你差不多完成了:) –

試試這個CSS：

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/

來源

2016-10-02 23:16:20

如果'＃body'內容更多 - 在css中刪除'height：100vh'。並使這兩個浮動div'位置：fixed'。現在你會得到更好的設計。（左右固定，滾動正文div） –

如何讓中間div填滿垂直空間？

回答

相關問題