3

我的问题是我的背景容器只显示到屏幕底部。在那之后的部分我看不到它。我几乎尝试了一切，但似乎没有什么对我有用。我希望它根据页面大小进行调整。

<body>
<div id="profilebg">

<!-- Other divs -->

</div>
</body>

我的 CSS 是

html, body {
    height:100%;
}

#profilebg
{
    position: absolute;
    margin-left:10%;
    margin-right:10%;
    width:80%;
    background-color:#ffffff;
    height: 100%;
    top: 0;
    bottom: 0;
    display: block;
}
4

2 回答 2

2

如果您不指定高度，则默认为“自动”，由内容的高度决定。

如果您在内容中浮动某些内容，请务必添加一个具有 ccs 样式的元素，clear:both以便父级可以正确确定它的高度。

同样，如果元素的任何子元素使用绝对定位，它将无法自动确定其高度，因为绝对定位的子元素不再与父元素在同一范围内。

一个示例工作方式是：

html, body {
  height:100%;
}

#profilebg
{
    margin: 0 10%;
    background-color:#ffffff;
}

编辑：更简洁的 CSS 样式 - 宽度与边距是多余的

编辑2：添加关于绝对定位的行

编辑 3：在以下评论中实现请求的 Div 结构：

<div id="page-container">
    <div id="header-container">
        <!-- Put your header here -->
    </div>
    <div id="body-container">
        <div id="profilebg">
            <!-- Profile BG Container -->
        </div>
        <!-- Any other body content here -->
    </div>
    <div id="footer-container">
        <!-- Footer content here -->
    </div>
</div>
于 2013-01-09T17:07:30.370 回答
0

以下似乎适用于您想要实现的目标。我已删除bottom:0;并更改height为min-height.

html, body {   
    height:100%; 
}

#profilebg {
    position: absolute;
    margin-left:10%;
    margin-right:10%;
    width:80%;   
    min-height:100%;
    background-color:#ffffff;
    top: 0;
    display: block;   
}

编辑这是一个小提琴

编辑 2这是一个相对定位的小提琴。

于 2013-01-09T16:57:28.707 回答