html - "container"div 内的 和 元素 --- 容器消失，除非指定了以像素为单位的特定高度

Question

我是一个完全的 html/css 新手，我正在制作我的第一个网站。我希望它看起来像这样:

http://www.dorishochscheid.nl/

我使用了一个 div 元素来“包含”导航栏和主要内容，如下所示:

<div id = "container">
<nav> ... working navigation bar here ... </nav>
<section id = "content"> ... main content here ... </section>
</div>

这是我的CSS:

body {
background-image: url(images/achtergrond.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin: 0;
}

#container {
margin: 0 auto 0;
margin-bottom: 200px;
width: 800px;
height: 1000px;
background-color: #de59b2;
opacity:0.85;
/* voor slechte browsers */
filter: alpha(opacity=85);
}

#content {
float: left;
background-color: #de59b2;
margin: 15px 45px;
}

导航栏、内容部分和容器都具有相同的不透明背景色。

问题是这样的:我希望容器 div 的高度根据内容部分中放置的内容量而增加。但是如果我删除 height = 1000px;整个容器从视线中消失。保留导航栏和主要部分的单独彩色框。

为什么会这样？？我见过像 height = 100%; 这样的东西正在使用，但这在这里也不起作用。我可以想象这样的声明就是我正在寻找的，看看我希望容器如何随着内容部分的增长而增长。

为什么会发生这种情况，如何根据容器包含的内容部分中的内容量来调整容器大小？

或者这是否是进行此类构建的完全错误的方法？

Answer 1

这是因为内容是 float 的。这样可以防止容器调整以适应内容。只需将其添加到您的容器中:

overflow:hidden;