将带有浮动子项的 div 扩展到其全高答案

【问题标题】：Expand div with floating children to their full height将带有浮动子项的 div 扩展到其全高
【发布时间】：2014-03-06 14:35:18
【问题描述】：

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

基本上我的容器<div> 中有浮动元素，这些元素正在扩展超出我的包装器底部。我希望包装器位于我所有内容的后面，以便用户可以阅读顶部的文本。将这个新的 CSS 类 clearfix 应用到我的包装器 <div> 问题得到解决，但创建了一个新的。我失去了将<div> 在页面上居中的能力，我在下面的原始问题中没有说明这一点。能够再次居中而不丢失“clearfix”解决方案的解决方案是使用具有margin-left: auto 和margin-right: auto 集的父<div>。见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%;
}

【问题讨论】：

来一份你所做的事情的 jsfiddle 怎么样？
你的 CSS 的 HTML 在哪里？
我不知道 jsfiddle 是什么，所以我搜索了一下，这是我的 jsfiddle.net/L7TKx 尽管他们提供的输出看起来不像我的浏览器渲染。似乎下面 pradeep 提供的 .clearfix css 代码可以正常工作，但我正在尝试修复的居中除外。
Pradeep 的 CSS 改变的是，ID 为 #wrapper 的 <div> 的高度扩展到其子项的高度。它与滚动或固定定位无关。因此，如果这是您想要的，那么您的问题似乎并未涵盖这一点。
我认为你是对的，我想要这个灰白色的 div 包含我的所有内容，但是它的长度太短，并且像我的侧边栏这样的一些浮动元素超出了好吧，我的文字内容更长。我开始想办法解决这个问题，并认为我需要在滚动时让 div 跟随，因此我的问题诞生了，但是在阅读了 clearfix 之后，似乎这实际上就是我想要的。我不确定是否应该编辑上述问题或开始一个新问题，但现在的问题是我无法在应用了 clearfix 的页面上将 div 居中。

标签： html css css-float

【解决方案1】：

你可以试试下面的代码：

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

.clearfix {
   display: inline-block;
}

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

祝你好运……

【讨论】：

这段代码差不多完成了，但一切都是左对齐的，我正在试验这些属性，看看我是否可以让它居中。我会做一些搜索，因为我不明白 .clearfix 是什么或它是如何工作的，但似乎已经完成了除了对齐之外的技巧
我最终使用了这段代码并在包装器周围添加了另一个包装器，请参阅我编辑的问题
你可以删除“.clearfix {display: inline-block;}”这个..也许它会帮助你..

【解决方案2】：

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

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

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

【讨论】：

background-attachment: fixed 是我一直在使用的一个属性，因为它适用于我的背景图像，但我遇到的问题是我添加到页面的 div。

【解决方案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 没有在页面上居中对齐并且我的一些其他元素跟随它，例如我的标题和导航。所以它右对齐。