Question

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

<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;
}

Answer 1

如果您未指定高度，则默认为“自动”，这取决于内容的高度。

如果您在内容中浮动某些内容，请务必添加具有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>

Answer 2

以下似乎适用于您想要实现的目标。我已移除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;   
}

编辑这是fiddle

编辑2 以下是具有相对定位的fiddle。

调整背景容器到页面高度而不是屏幕高度。

2 个答案: