css - HTML/CSS Div(高度 : 80px) over Div(height:100%;)

我尝试让我的主页布局正常工作。

现在 div“列表”的高度应该比底部小 80px。我用 margin 和 position: absolute 做了一些测试，但我无法得到它。

#body, #left, #map, #list {
  height: 100%;
}

#left {
  float:left; 
  width:270px;
}

#head {
  height:80px; 
  background-color:blue;
}

#list {
  overflow:auto;
  background-color:green;
}

#map {
  background-color:red;
}

<body >
  <div id="left">
    <div id="head"> </div>  
    <div id="list"> </div>
  </div>
  <div id="map"> </div>
</body>

它应该是这样的:

     280px      100%
     ______________________
80px|head |map             |
    |_____|                |
    |list |                |
    |     |                |
    |     |                |
100%|     |                |
    |_____|________________|

现在是这样的:

     280px      100%
     ______________________
80px|head |map             |
    |_____|                |
    |list |                |
    |     |                |
    |     |                |
100%|     |                |
    |     |________________|
    |     |
    |_____|

提前致谢

最佳答案

问题是您根本没有为您的 div 指定高度(#head 除外)。

如果您希望列表具有高度，您可以选择将直接高度指定给 #left 或 #list。

参见 here例如，将 #left 高度设置为某个值(而不是 100%)。

关于css - HTML/CSS Div(高度 : 80px) over Div(height:100%;)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7254608/