Question

我遇到过类似性质的无数问题，但我的情况有点不同;我的外容器高度为100％而不是固定高度。

我在容器中有一堆[ghoti@pc ~]$ mkdir "some dir" [ghoti@pc ~]$ cd "some dir" [ghoti@pc ~/some dir]$ cd "$PWD" [ghoti@pc ~/some dir]$ cd $PWD bash: cd: /home/ghoti/some: No such file or directory个。它们溢出，我希望有一个滚动条允许滚动。

这正是我想要实现的目标：http://jsfiddle.net/jcjw2jmo/

除此之外，我发布的链接有一个固定的div。我希望有一个百分比高度。

我尝试设置百分比height: 200px;和height但没有运气。这是我的进步：http://jsfiddle.net/k52eh0xr/

如何让两个小提琴具有相同的行为，而不是使用百分比？

非常感谢

PS。我知道这可以使用Javascript / jQuery完成，但我正在寻找一个只有CSS的解决方案

Answer 1

我认为您需要将html和body标记设置为height:100%，以便您可以按照自己的意愿使用百分比

html, body {height:100%}

DEMO

Answer 2

您遇到的问题主要与在CSS中使用百分比高度有关。

如果您要在子元素上使用百分比高度，则需要specify the percentage height for all parent elements最多包括body和根元素（html）。

在您的代码中尝试此操作：

HTML （无更改）

<强> CSS

/* NEW */
html, body { 
    height: 100%; /* necessary when using percentage heights within body
                     on non-absolutely positioned children (such as .outer)
                     more info: https://stackoverflow.com/a/31728799/3597276 */ 
    overflow: hidden; /* prevent vertical scrollbar on browser window,
                         in conformance with demos posted in question */
} 

.outer {
    border: 1px solid black;
    height: 50%; /* ADJUSTED */
    /* max-height: 10%; REMOVED */
    overflow-y: scroll;
    width: 300px;
}

.inner {
    /* height: 10%; REMOVED
    max-height: 10%; REMOVED */
}

.item {
    background: grey;
    border: 1px solid red;
    height: 50px;
}

DEMO：http://jsfiddle.net/k52eh0xr/5/

如何将垂直滚动条应用于百分比高度的div？

2 个答案: