Question

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

现在div“list”的高度应该比底部小80px。我用保证金和头寸进行了一些测试：绝对但我无法得到它。

#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%|     |                |
    |     |________________|
    |     |
    |_____|

提前致谢

Answer 1

问题是你没有为你的div指定一个高度（#head除外）。

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

有关将#left高度设置为某事（而不是100％）的示例，请参阅here。

Answer 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以避免这种情况）

希望有所帮助。

Div上的HTML / CSS Div（高度：80px）（高度：100％;）

2 个答案: