Question

我正在设计一个网站，并且目前正在使用样式进行大量工作。它有一个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">。

Answer 1

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

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

Answer 2

如果父标签未伸展以包围子标签，则子项很可能已从文档的正常流程中取出（通过浮动或定位）; 你需要把孩子带回流。有几种方法可以做到这一点：

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

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

使父母也成为定位元素：position:relative;

Answer 3

您是否尝试在所有列之后添加已清除的div？像

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

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

Div内的Div伸展

3 个答案: