css - 在没有位置的 DIV 内滚动：绝对？

Question

我有一个有 5 个水平 div 的网站，它们全部浮动：左并且有一个 % 宽度。左边的我想在里面放文字，还有一个滚动条。但是，滚动条只有在我给它一个位置时才会出现：绝对。在 jsfiddle 中尝试一下。当我这样做时， div 会忽略其他 4 个并且它们会脱节。我该如何解决这个问题？

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

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

score 2 · Accepted Answer

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

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

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

由于 height 是auto，所以 height as 是容纳所有内容所需的高度。

既然你已经设置overflow: auto了，你只会在内容高于元素（它不是）时获得滚动条。

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

score 0 · Accepted Answer

0

我想你正在寻找： overflow-y: scroll

于 2013-10-03T13:28:36.440 回答

score 0 · Accepted Answer

原因是您已height:100%在 div 上指定.main。100% 什么？哪个家长？

如果您将 body 的高度指定为 100%，那么它将起作用。

html, body { height: 100%; }

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

score 0 · Accepted Answer

而不是使用浮点数，使用position: absolute;and left: number%;（你必须弄清楚每个元素的左边有多少）。

查看小提琴：http: //jsfiddle.net/QN8RS/3/

4 回答 4