CSS：在 3 列 div 布局后清除内容答案

【问题标题】：CSS: Clearing the Content after a 3-Column Div LayoutCSS：在 3 列 div 布局后清除内容
【发布时间】：2013-04-29 23:10:58
【问题描述】：

我无法弄清楚如何清除我的 3 个 div 列下方的内容——其中每个 div 列包含一个带有一些居中文本的跨度和一个跨度下方的文本区域。问题，或者至少我认为，是 div 标签被浮动，而我没有正确清除它们。

发生的情况是 Firefox 将列之后的下一个元素（在我的例子中是一个按钮）浮动到第一列上。我的本地文件在 Internet Explorer 中完美呈现（但我假设这是因为 IE 添加了自己的附件以进行清除......找不到我在哪里读到的）。但是，当我在 IE 中查看我的 jsFiddle 代码时，文本区域不会保持 100% 的高度。我假设 jsFiddle 不会在 IE 的 Quirks 模式下呈现 HTML（这就是它与我的本地文件不同的原因）。

我查看了Holy Grail 文章、w3schools 文章、clear:after fix 文章和其他几篇文章 (div column layout)，但在这两种浏览器中都找不到可行的解决方案。

这是我的jsFiddle code，这是我的代码。如您所见，我的代码有多种方法，因此很抱歉造成混乱。

site.html

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="site.css" />
    </head>
    <body>
        <div id="top" class="clearfix">
            <div class="column">
                <span>blah1</span>
                <textarea class="text"></textarea>
            </div>
            <div class="column">
                <span>blah2</span>
                <textarea class="text"></textarea>
            </div>
            <div class="column clearfix">
                <span>blah3</span>
                <textarea class="text"></textarea>
            </div>
            <div class="clearing">&nbsp;</div>
        </div>
        <div id="center">
            <span>blah blah blah</span>
            <input type="button" value="Button" />
        </div>
    </body>
</html>

site.css

body, html {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  border: 0;
  margin: 0;
}

#top {
  height: 40%;
  display: block;
  width: 100%;
  float: left;
}

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

.column {
  width: 33%;
  float: left;
  height: 100%;
  text-align: center;
}

.clearing {
  height: 0;
  clear: both;
}

.text {
  width: 100%;
  height: 100%;
}

#center {
  clear: both;
}

还需要注意的是，我已尝试添加 overflow: hidden (and auto)，这确实解决了问题，但我想查看我的整个文本区域...而不是隐藏它/让它滚动。任何建议或想法将不胜感激。

【问题讨论】：

标签： css html

【解决方案1】：

拍摄：

height: 40%;

超出了 CSS 中的#top 减速。这就是问题的根源。如果你想让文本框变大，只需使用：

textarea{height:200px;}

希望这会有所帮助。

【讨论】：

不，没有解决问题。
我也不打算使用固定宽度...我喜欢我的百分比。 :)
嗯，它重叠的原因是因为您将 textarea 视为其容器的 100%，因此它与跨度的大小重叠，因为内部的高度现在是 textarea(100% ) + 跨度。您必须给 textarea 80% 和 span 20%，或者重新考虑如何布置它们。
呃！对，你是……那真是个愚蠢的错误。那么为什么 IE 不关心这个呢？
Pshh，为 IE 提供答案，哈哈。我认为这是因为 DIV 之后的按钮具有 hasLayout 属性......也许？这篇文章稍微解释一下我在说什么positioniseverything.net/easyclearing.html