Question

我试图弄清楚这一点，而不是在这里弄得一团糟。我有一个容器div 然后在其中我还有3个div，它们左边是浮动的。我的问题是我的容器div的高度为100％。像这样

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

和我的容器div（sidebar1）中的一个div 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将“list”元素添加到sidedar1 div。我遇到的问题是我实际上没有让滚动条出现，直到有3或4个项目超过视图，甚至当滚动条显示我无法一直向下滚动以查看它们。我知道它有一些东西，父母是100％身高，孩子也是100％。我看不到侧边栏1滚动的底部加上我为容器div隐藏了滚动条。做这个的最好方式是什么？我希望有容器div基本上扩展用户屏幕的全长和宽度没有任何滚动条，然后在其中我想让我的孩子div漂浮左，但我不希望他们失去视图，如果这使任何感。我希望能够在它们出现时看到它们的完整滚动条。提前致谢米格尔

Answer 1

问题是你的容器没有“意识到”它的孩子，因为它们是浮动的。使用容器上的clearfix解决方案来包含浮动，你应该正确地获取滚动条。

请注意，因为您将从第一个项目获得滚动条，因为容器的内容将具有距边框100％+ 2px的高度。您可以通过将浮动元素上的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

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

1 个答案: