HTML/CSS Div(高度: 80px) 超过 Div(高度:100%;)
我尝试让我的主页布局正常工作。
现在 div“list”的高度应该比底部小 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%| | |
| |________________|
| |
|_____|
提前致谢
i try to get my Homepage-Layout to work.
Now the height of the div "list" should be 80px smaller from bottom.
I made some tests with margin and position: absolute but I couldn't get it.
#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>
this is how it should look like:
280px 100%
______________________
80px|head |map |
|_____| |
|list | |
| | |
| | |
100%| | |
|_____|________________|
this is how it looks like now:
280px 100%
______________________
80px|head |map |
|_____| |
|list | |
| | |
| | |
100%| | |
| |________________|
| |
|_____|
Thanks in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
问题是您根本没有为 div 指定高度（
#head除外）。如果您希望列表具有高度，则可以选择将直接高度指定为
#left或#list。请参阅此处，了解
#left高度设置为某个值（而不是 100）的示例%）。The problem is that you're not specifying a height at all for your div (except
#head).If you want list to have a height, you have the choice to specify a direct height to
#leftor to#list.See here for an example with the
#leftheight set to something (and not 100%).所以现在（自从你回答以来）我理解你的问题。
要解决这个问题，需要执行以下操作：
position:absolute添加到#headwidth:100%;添加到#head< /code>position:relativeto#left说明：
绝对位置会将
#head放在最接近父级的左上角。它的宽度默认为 0。因此我们需要将其设置为 100% 以获取所有父级宽度。
然而，绝对定位的 div 的引用是最近的父级，其位置为绝对或相对（如果没有匹配，则为正文）。
因此我们将
#left的位置设置为relative，以便让它具有对#head的引用。没有absolute因为我们不希望它被 map 压垮其他解决方案：
overflow-y:hidden;添加到#left这样，垂直轴上从
#left溢出的所有内容都不会显示。您可以选择适合您需求的解决方案。
其中一个（溢出的）将进行底部切割。另一方面，顶部将被剪切（或者您需要添加一些
padding-top以避免这种情况）希望有所帮助。
So now (since your answer) I understand your problem.
To solve it, the following is needed:
position:absoluteto#headwidth:100%;to#headposition:relativeto#leftExplanation:
The position absolute will put
#headin the top left corner of his closest parent.It's width will default to 0. So we need to put it to 100% to take all the parent width.
However the reference for an absolute positioned div is the closest parent that has a position that is either
absoluteorrelative(or the body if nothing matches).So we set the position of
#lefttorelativein order to have it has a reference for#head. Noabsolutebecause we don't want it to be crushed by mapOther solution:
overflow-y:hidden;to#leftThis way, everything that overflows from
#lefton a vertical axis, won't be displayed.You can choose the solution that fits your need.
One (the overflow one) will have the bottom cut. On the other, the top will be cut (or you'll need to add some
padding-topto avoid that)Hope that helps.