如何使 div 部分的高度自动适应其内容的高度？答案

【问题标题】：How can I make the height of a div section to automatically adapt to the height of its content?如何使 div 部分的高度自动适应其内容的高度？
【发布时间】：2014-09-04 05:17:18
【问题描述】：

我有一个带有id=middle 的div 容器，该容器通过以下代码在页面中居中：

header, #middle, footer {
    margin-left: auto;
    margin-right: auto;
}

在名为middle 的div 内部有nav 和main 部分。 div 就像 nav 和 main 的容器，因此在保持居中的同时将 nav 向左对齐和 main 向右对齐应该更容易。

我尝试通过以下代码进行这种对齐：

#middle {
    width: 849px;
    height: 600px; /*I wanto to set this to auto or get rid of it*/
}

nav {
    width: 200px;
    float: left;
}

main {
    width: 649px;
    float: right;
}

它有效，但我必须指定#middle 的高度，它不会自动适应其内容的高度，弄乱了所有其余的布局。在我的网站中，main 和 nav 的高度因页面而异。

我该如何解决这个问题？我不想为#middle 指定固定高度，而是希望#middle 根据main 和nav 之间的最大高度来改变其高度。

我不知道它是否有用但CSS代码以：

footer {
    width: 849px;
    height: 50px;
}

这是我页面的 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <header>
            ...
        </header>
        <div id="middle">
            <nav>
                ...
            </nav>

            <main>
                ...
            </main>
        </div>
        <footer>
                ...
        </footer>
    </body>
</html>

注意nav和main是语义html5标签，类似于div

【问题讨论】：

标签： html css layout

【解决方案1】：

在</main> 之后添加<div> 和clear: both;。然后你可以删除#middle的高度

【讨论】：