Question

我是网页设计的新手，我试图测试页面布局。我有一个带有标题，左浮动div，右浮动div，正文和页脚的布局。我想要做的就是获得＆＃34;身体＆＃34; div填充浮动div之间的垂直空间。而且，如果可能的话，我怎样才能让整个布局填满屏幕的垂直空间？我在页面底部添加了一张图片，我试图填写所有潦草的空间。

这是我的HTML代码，

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

What i'm trying to figure out.

Answer 1

试试这个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/

如何获得填充垂直空间的中间div？

1 个答案: