HTML/CSS Div(height: 80px) 在 Div(height:100%;)答案

【问题标题】：HTML/CSS Div(height: 80px) over Div(height:100%;)HTML/CSS Div(height: 80px) 在 Div(height:100%;)
【发布时间】：2011-08-31 22:11:56
【问题描述】：

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

现在 div“列表”的高度应该比底部小 80 像素。我用 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%|     |                |
    |     |________________|
    |     |
    |_____|

提前致谢

【问题讨论】：

需要更多描述你想要做什么。
如果内容过长，#list 是可滚动的。但是#list的高度应该受其父级的高度（#left）
澄清一下； head 是页面顶部 80px，map 是页面底部 80px，list 展开到其余部分？

标签： css html height

【解决方案1】：

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

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

请参阅 here 以获取将 #left 高度设置为某个值（而不是 100%）的示例。

【讨论】：

当然我希望高度是动态的以调整浏览器的大小。
在这种情况下，错误（我认为）只是因为您不应该使用#body，而是在没有# 的情况下使用body。

【解决方案2】：

所以现在（因为你的回答）我明白你的问题了。

要解决它，需要以下内容：

将position:absolute 添加到#head
将width:100%; 添加到#head
将position:relative 添加到#left

解释：

绝对位置会将#head 放在他最近的父级的左上角。它的宽度将默认为 0。因此我们需要将其设置为 100% 以获取所有父宽度。但是，绝对定位 div 的引用是最近的父级，其位置为absolute 或relative（如果没有匹配，则为主体）。因此，我们将#left 的位置设置为relative，以使其具有#head 的引用。没有absolute，因为我们不希望它被地图压垮

其他解决方案：

将overflow-y:hidden; 添加到#left

这样，垂直轴上从#left 溢出的所有内容都不会显示。

您可以选择适合您需要的解决方案。一个（溢出的）将有底部切割。另一方面，顶部会被剪掉（或者你需要添加一些padding-top 来避免这种情况）

希望对您有所帮助。

【讨论】：