个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我遇到的问题是我有以下结构化代码。本质上，我希望 UL 占据页面顶部的 37 个像素，而其后的 div 占据浏览器窗口的剩余区域。
因此，如果我调整窗口大小并使其变高，div 的紫色背景应该会填满整个底部区域。我遇到的问题是，如果我将紫色 DIV 的高度设置为 100%，它会创建一个滚动条，因为它创建的 DIV 为父级大小的 100%，而不是 剩余<的 100%/em> 计算 UL 之后的区域。
<body style="padding:0; margin:0;border-width:1px;border-color:Gray; border-style:dashed; position:absolute; left:0px; right:0px; top:0px; bottom:0px;">
<div style="margin:0; padding:0; left:0px; right:0px; top:0px; bottom:0px;margin:0;height: 100%;border-width:1px;border-color:Green; border-style:dashed;">
<div style="margin:0; padding:0; height:100%;border-width:1px;border-color:Red; border-style:dashed;">
<ul style="padding:0;margin:0;border-width:1px;border-color:Blue; border-style:solid; left:0px; right:0px; top:0px; bottom:0px;">
<li >Test Item</li>
</ul>
<div style="height:100%;background-color:Purple;">Test Content</div>
</div>
</div>
编辑:我应该注意，我正在最新版本的 Chrome 中进行测试，但我在 IE9 和最新版本的 Firefox 中看到了相同的行为。
最佳答案
我认为您应该使用 div 包装它们。示例
<div id="wrapper" style="height: 100%;position:relative;">
<ul>
<li >Test Item</li>
</ul>
<div style="height:100%;position: absolute; left:0; top:0;padding-top: 39px; z-index: -1">Test Content</div>
</div>
关于html - 如何将 DIV 设置为使用其父容器中 100% 的剩余空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9807008/
25
4
0
我是一名优秀的程序员,十分优秀！