Css 将背景容器调整为页面高度而不是屏幕高度。_Css_Background_Containers

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

css

Css 将背景容器调整为页面高度而不是屏幕高度。,css,background,containers,Css,Background,Containers,我的问题是，我的背景容器只显示到屏幕底部。在那之后的部分我就看不到了。我几乎什么都试过了，但似乎什么都不管用。我希望它能根据页面大小进行调整 <body> <div id="profilebg">  </div> </body> 下面的内容似乎对您想要实现的目标有效。我已经删除了底部：0并将高度更改为最小高度 html, body { height:100%; } #prof

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

<body>
<div id="profilebg">

<!-- Other divs -->

</div>
</body>

下面的内容似乎对您想要实现的目标有效。我已经删除了

底部：0并将高度
更改为最小高度

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这里是一个带有相对定位的示例
 如果不指定高度，则默认为“自动”，由内容的高度决定
如果在内容中浮动某些内容，请确保添加具有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>


如果#profilebg是您的背景容器，为什么要使用绝对定位？我尝试过不使用绝对定位，但也不起作用。尝试了很多东西，读了很多文章，我在某个地方读到了这篇文章，所以我想尝试一下，高度：100%，顶部：0，并且底部为0我同意，我个人尽可能避免绝对定位。请看我的编辑答案，第二把小提琴使用相对定位。我想这是不工作与我的其他div。我尝试了标记，它正在使用它们。如果对#profilebg中包含的所有内容使用绝对定位，那么它将无法计算出初始高度。我正在对#profilebg中的某些容器使用绝对定位，我尝试了相对定位，但这也不起作用。如果我从容器中删除所有绝对定位div。知道原因是什么吗？当父母有绝对定位的孩子时，他们无法确定孩子的身高，因为绝对定位将孩子带出了测试范围parent@linpar如果你给我们一个想法，你试图做什么与一些元素的绝对定位，一个对你有用的解决方案可能会非常感谢你的帮助。我真的很感激。@linpar这就是这个网站的全部内容
<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>