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

时间:2014-07-14 10:04:05

标签: html css layout

我有一个div容器id=middle,该容器在此代码的页面中居中:

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

在名为div的{​​{1}}内,有middlenav部分。 main的作用类似于divnav的容器,因此将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根据#middlemain之间的最大高度来改变其高度。

我不知道它是否有用但CSS代码的结尾是:

nav

这是我页面的HTML代码:

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

N.B。 <!DOCTYPE html> <html> <head> </head> <body> <header> ... </header> <div id="middle"> <nav> ... </nav> <main> ... </main> </div> <footer> ... </footer> </body> </html> nav是语义html5标记,类似于main

1 个答案:

答案 0 :(得分:1)

<div>之后添加clear: both; </main>。然后您可以删除#middle

的高度