Fatal编程技术网
  • html/
  • Html 如何使div节的高度自动适应其内容的高度？

Html 如何使div节的高度自动适应其内容的高度？

html css layout

Html 如何使div节的高度自动适应其内容的高度？,html,css,layout,Html,Css,Layout,我有一个div容器，其id=middle位于页面中央，代码如下： header, #middle, footer { margin-left: auto; margin-right: auto; } 在名为middle的div中，有nav和main部分。 div的作用类似于nav和main的容器，因此应该更容易将nav向左对齐，将main向右对齐，同时保持它们居中 我尝试通过以下代码进行这种对齐： #middle { width: 849px; height:

我有一个
div
容器，其
id=middle
位于页面中央，代码如下：

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
的高度，它不会自动调整以适应其内容的高度，从而打乱布局的所有其他部分。在我的网站上，主页和导航的高度因页面而异

我怎样才能解决这个问题？我不想为
#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
添加
和
清除：两者都是在
之后。然后可以删除
#middle