Question

我有一个绝对定位的包装div。是否可以扩展包装器div的高度以容纳内容并显示背景颜色。在我使用的代码下面：

CSS

html, body {
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 border: 0px;
}

body {
 font-family: Arial,sans-serif;
 font-size: 2em;
 line-height: 1.5em;
}

#contentbody {
 position: absolute;
 left: 5px;
 right: 5px;
 top: 5px;
 bottom: 5px;
 background-color: Green;
}

HTML

<div id="contentbody">
 <div id="content">
  <div style="height: 1500px;">some large content</div>
 </div>
</div>

Answer 1

尝试在DIV上使用style = "overflow: scroll"

编辑：删除overflow：auto

Answer 2

我认为你不应该在bottom中设置#contentbody。通过设置top和bottom，您强制div的高度为浏览器视口的高度减去10（顶部+底部）。

Answer 3

将溢出：隐藏添加到html,body选择器，然后溢出：自动转到#contentbody div：

        html, body {
         width: 100%;
         height: 100%;
         margin: 0px;
         padding: 0px;
         border: 0px;

         overflow:hidden; /* overflow is hidden */
        }

        body {
         font-family: Arial,sans-serif;
         font-size: 2em;
         line-height: 1.5em;
        }

        #contentbody {
         position: absolute;
         left: 5px;
         right: 5px;
         top: 5px;
         bottom: 5px;
         background-color: Green;

         overflow: auto; /* overflow is auto to allow scrolling */
        }

绝对定位的DIV不会延伸到内容的高度

3 个答案: