Div 内 Div 拉伸答案

【问题标题】：Div within Div stretchingDiv 内 Div 拉伸
【发布时间】：2011-02-02 07:00:04
【问题描述】：

我正在设计一个网站，目前正在做大量的样式工作。它有一个 3 列布局（两个大的内容列，一个小的导航栏列）和一些仅出于审美目的而存在的“包装”div。 HTML 看起来像这样：

<div id="out_wrapper">
    <div id="in_wrapper">
        <div id="nav"> ... content ... </div>
        <div class="column"> ... content ... </div>
        <div class="column"> ... content ... </div>
     </div>
</div>

每个 div 区域的宽度都是固定的，但我希望它们是可变高度以解决内容量的增加。我希望 in_wrapper 和 out_wrapper 的高度比它们包含的 div 略大，但我似乎无法让它工作。我尝试设置min-height 而不是height，并完全删除height 属性，但我永远无法让in_wrapper 或out_wrapper 延伸到内容。列伸展得很好。

或者，我可以将溢出设置为自动并允许滚动，这将使网站保持固定大小，但这似乎是不太理想的结果。

该网站根据要求使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">，如果这有影响的话。

【问题讨论】：

您是否在 out_wrapper 和 in_wrapper 上设置了填充？
很多很多类似的问题：1、2、3。您还应该查看 960.gz、蓝图和面向对象的 CSS 框架，它们都可以解决这个问题。

标签： css html

【解决方案1】：

将两个包装器的高度设置为auto，并在底部添加填充。另外，overflow:hidden 如果孩子们在漂浮。

#out_wrapper, #in_wrapper { height:auto;padding-bottom:10px;overflow:hidden;}

【讨论】：

优秀。像魅力一样工作！只要 SE 允许我就接受这个。

【解决方案2】：

如果父标签没有延伸到子标签周围，那么子标签很可能已经脱离了文档的正常流程（通过浮动或定位）； 你需要把孩子带回到流程中。有几种方法可以做到这一点：

将样式overflow:auto添加到元素浮动的容器元素中。

在浮动内容之后添加一个非语义“更清晰”的 div：<div style="clear:both"></div>

将父元素也设为定位元素：position:relative;

【讨论】：

+1：没有让我找到解决方案，但它帮助解释了我遇到问题的原因。里面确实有一些花车。

【解决方案3】：

您是否尝试在所有列之后添加一个清除的 div？喜欢

<div style="clear:both"></div>

这会将容器拉到总高度。然后添加一些边距和/或填充以创建额外的空间。

【讨论】：

虽然这个将用于解析浮动元素周围的容器，但它是不必要的标记。容器只需要在 CSS 中应用overflow:hidden。