html - 包含 overflow-y 的 div 的高度 : hidden not expanding with content

Question

所以我在一个包含的 div 中包含 3 个 div，如下所示:

<div id="contain">
    <div id="leftnav">
    ....
    </div>
    <div id="todo">
    ...
    </div>
    <div id="rightcontent">
    ....
    </div>
</div>

css如下:

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

#contain {
    width: 1000px;
    background: #ffffff;
    display: block;
    min-height: 500px;
    height: auto;
    max-height: 1500px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }

#leftnav, #todo {
    float: left;
    width: 20%;
    display: block;
    overflow: hidden;
    height: 100%;
    padding: 10px;
    position: absolute;
    left: -200px;
    bottom: 0;
    }
#rightcontent {
    float: right;
    width: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    }

现在，#leftnav 和#todo 以它们现在的方式定位的原因是，如果用户单击链接，它们将根据它们的左侧值向右动画，并且右侧的内容将全部显示时间。然而，这就是问题所在。

我需要根据 #rightcontent div 中的内容将包含的 div 的高度扩展到最大高度。就目前而言，它只是不断地将高度保持在 500px 无论如何，并实现滚动条(我不希望发生这种情况)。也许我处理这一切都是错误的，并且放置一个 overflow: hidden 无论如何仍然将它设置为 500px。

如果需要，我可以提供更多信息。提前致谢。

Answer 1

看起来你的 float 有问题。当您 float 元素时，它们会打破正常的渲染流程。就像测试一样，将 float:left 添加到您的 #contain div。您应该会看到它展开以包含其子 div。

出于这个原因，我通常尽量避免使用 float 。