绝对定位的DIV不会扩展到内容的高度

我有一个绝对定位的包装div。是否可以扩展包装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>

来源

2010-09-02 Geert

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

来源

2010-09-02 09:32:26

也许你是对的，但我希望整个页面（减去5个像素边距）由背景颜色覆盖，即使内容不是整页。我怎么能解决这个同时使用顶部和底部？ – Geert 2010-09-02 09:52:45

@Geert如何在所需颜色的body元素上定义边框以及背景颜色？ – 2010-09-02 10:24:25

这也许是最好的解决方案，但它仍然不理想。你想要的是，DIV本身扩展到底部减5像素的边际。但我想没有解决方案，除了也许一些JavaScript黑客... – Geert 2010-09-09 11:43:57

尝试在你的DIV

EDITED使用style = "overflow: scroll"：到remoe溢出：汽车

来源

2010-09-02 09:29:46

溢出是默认的自动所以我怀疑它会帮助他与 – corroded 2010-09-02 09:32:13

溢出地址：隐藏你的html,body选择和和overflow：auto更改您的#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 */ 
     }

来源

2010-09-02 09:38:57 naikus

这适用于这种情况，但如果你有（我在我的真实脚本中）最小宽度和最小高度＃ contentbody div和浏览器屏幕太小，无法显示最小宽度和最小高度值，因此用户无法看到所有内容（因为没有主体滚动条） – Geert 2010-09-02 09:50:22

绝对定位的DIV不会扩展到内容的高度

回答

相关问题