如何让中间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填满垂直空间？

回答

相关问题