Question

更新：使用Pradeep提供的代码解决了问题，特别是“clearfix”代码。我问这个问题，寻找一种方法来保持我的包装<div>在我的所有内容后面，即将其高度扩展到所有孩子的全高，并考虑使用移动<div>在现实中我的问题在“What is a clearfix?”和CSS clearfix demystified中得到了充分讨论。

Essentialy我的容器<div>中的浮动元素正在扩展到我的包装器的底部。我希望包装器支持我的所有内容，以便用户可以阅读顶部的文本。将这个新的CSS类clearfix应用于我的包装器<div>，问题已解决，但创建了一个新问题。我失去了将<div>置于页面中心的能力，我在下面的原始问题中没有说明。能够在不丢失“clearfix”解决方案的情况下再次居中的解决方案是使用设置了<div>和margin-left: auto的父margin-right: auto。见CSS clearfix how to over come the inability to center an element using it

原始问题：

http://jsfiddle.net/L7TKx/

当用户向下滚动页面时，我希望我的<div>随页面移动。

我在本网站以及其他人看到了你需要添加postion:fixed属性的答案，但是当我这样做时，我在页面中心的div现在左对齐，滚动条消失了，因此您无法查看其余内容。我正在寻找一个保持滚动条的修复程序，当用户滚动时，<div>会跟随。

请参阅http://www.rustdome.hfbsite.com/当用户滚动时，我希望在文本后面跟随白色背景。

我有以下内容，并尝试使用position:fixed但禁用了滚动条。

#wrapper {
    min-width: 740px;
    max-width: 1000px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: hsla(30,100%,97%,0.69);
    height: 100%;
}

html {
    min-height: 100%;
    position: relative;
}

body {
    height: 100%;
}

Answer 1

您可以尝试以下代码：

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
   display: inline-block;
}

在css上面添加你的css文件..并在你的主div（包装器）中添加“clearfix”类。

祝你好运......

Answer 2

您可能不想使用position:fixed，而是使用background-attachment:fixed。这将使文本保持可滚动时固定背景。

关于Pradeep的代码，您也可以使用更简单的方法。您只需要将此规则添加到CSS中：

#wrapper::after {
   content: "";
   display: block;
   clear: both;
   height: 0;
}

Answer 3

您可能希望它完全独立于包含您内容的div。我假设#wrapper是你要移动的灰白色的东西，我会尝试类似下面的东西。

HTML:
<html>
<body>
     <div id="wrapper"></div>
     <div id="content">
        Your Content
     </div>
</body></html>
CSS:
#wrapper {
    min-width: 740px;
    max-width: 1000px;
    width: 100%;
    position: fixed;
    left: 50%;
    margin-left: 500;
    background-color: hsla(30,100%,97%,0.69);
    height: 100%;
    z-index: -1;
}
#background {
    z-index:-2;
}

将浮动孩子的div扩展到全高

3 个答案: