html - 将带有 float 子元素的 div 扩展到它们的全高

Question

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

本质上是我的容器 <div>里面有漂浮的元素，它们正在扩展到我的 wrapper 的底部。我希望包装器位于我所有内容的后面，以便用户可以阅读顶部的文本。应用这个新的 CSS 类 clearfix到我的 wrapper <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”类。

祝你好运......