Question

我有一个包含5个水平div的网站，所有人都浮动：左边有％宽度。左边的我想要文本，还有一个滚动条。但是，滚动条仅在我给它一个位置时显示：绝对。在jsfiddle中尝试一下。当我这样做时，div忽略了其他4，他们就会失控。我该如何解决这个问题？

jsfiddle＆gt; http://jsfiddle.net/QN8RS/ 添加位置：绝对; CSS中的以下div。你会看到它工作，但div不合适..

#left{
    float:left;
    background-color:#C00;
    width:15%;
    height:100%;
    overflow:auto;
    top: 0px; 
    bottom: 0px;
}

Answer 1

您尚未指定<body>的高度，因此其高度计算为auto。

您将.main的高度指定为100%。这是一个百分比，因为它的父（身体）的高度计算为auto，计算的高度也是auto。

您将#left的高度指定为100%。这是一个百分比因此，因为其父（.main）的高度计算为auto，计算的高度也是auto。

由于高度为auto，因此高度必须高，以保存所有内容。

由于您已设置overflow: auto，因此只有内容高于元素（不是）时才会获得滚动条。

在html和body元素上设置height: 100%，以便#left的计算高度是视口的高度，而不是auto。

Answer 2

我认为您正在寻找： overflow-y: scroll

Answer 3

原因是您在div height:100%上指定了.main。 100％的是什么？哪位家长？

如果您指定身体的高度为100％，那么它将起作用。

html, body { height: 100%; }

检查更新后的小提琴：http://jsfiddle.net/QN8RS/2/

Answer 4

使用position: absolute;和left: number%;（而不是使用浮点数）（您必须弄清楚每个元素左边的百分比）。