我已经在网站上搜索了这个问题的答案,据我所知,其他问题不涉及父 div
使用 position:absolute;
这是我的代码:
<div id="wrapper">
<div id="child">
Here are the contents to be displayed.
</div>
</div>
这是我的 CSS:
#wrapper {width:1024px; height:auto; position:absolute; top:0px; left:0px; border:solid 1px #000;}
#child {width:500px; height:1000px; position:absolute; top:35px; left:15px; border:solid 1px #FF0000;}
这是一个 fiddle :jsfiddle
最佳答案
如果 parent 不能是相对的,那么 child 必须是相对的(你将获得相同的行为)。如果两者都是绝对的,那么它们就没有关系,因此 parent 无法适应 child (反之亦然)。您还必须向父级添加 padding-bottom 以修补子级的完整大小(至少是子级的顶部 + 您想要的任何填充)
更新的 fiddle 示例:http://jsfiddle.net/aEbFv/8/
#wrapper {
....
padding-bottom: 60px; /* 35px from childs top + 25px for padding */
}
#child {
....
position:relative;
}
关于html - 使用绝对定位的子div时如何扩展绝对定位的包装div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16035409/