javascript - 正确设置父 div 和子 div 的百分比高度

Question

我正在努力解决这个问题，但又不想在这里弄得一团糟。我有一个容器 div 然后在其中我还有 3 个 div，它们向左浮动。我的问题是我的容器 div 的高度样式为 100%。 像这样

.Container {
height: 100%;
min-width: 600px;
overflow-y: hidden;
 }

容器 div(sidebar1) 中我的子 div 之一(为了清楚起见，我将其保留为一个 div)具有此 css。

 border: 1px solid #E0E0DF;
bottom: 10px;
box-shadow: 2px 2px 4px #888888;
float: left;
height: 100%;
overflow-y: scroll;
width: 18%;
  }

我使用 jquery 将“列表”元素添加到 sidedar1 div。我遇到的问题是我实际上并没有让滚动条出现，直到 View 中有 3 或 4 个元素，甚至当滚动条出现了，我无法一直向下滚动以查看它们。我知道这与 parent 的高度为 100% 而 child 的高度也为 100% 有一定关系。我看不到 sidebar1 滚动条的底部，而且我为容器 div 隐藏了滚动条。做这个的最好方式是什么？我想要容器 div，它基本上可以扩展用户屏幕的整个长度和宽度，没有任何滚动条，然后在其中我想让我的子 div 向左浮动，但我不希望他们失去 View ，如果这样的话感觉。我希望能够在它们出现时看到它们的完整滚动条。 提前致谢 米格尔

Answer 1

问题是您的容器“不知道”它的子容器，因为它们是 float 的。在你的容器上使用 clearfix 解决方案来包含 float ，你应该正确地获得滚动条。

不过要小心，因为您将从第一个元素获得滚动条，因为容器内容的高度为距边框 100% + 2px。您可以通过将 float 元素的 box-sizing 属性设置为 border-box 来解决这个问题。

Clearfix 主要思想:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

一些链接:http://www.webtoolkit.info/css-clearfix.html