html - 如何将列表缩放到横向设备高度而不是列表内容高度

Question

我有两个水平对齐的元素，左边的是一个列表。如果我添加一些元素以便列表开始滚动，列表只会变得比我的设备高度大，如果我向下滚动列表，我右侧的第二个内容会滚动。所以列表的高度超过 100%...这里有一些代码给你:

http://codepen.io/anon/pen/qhylB

当我创建这段代码时，我注意到我的两个 div 都没有缩放到设备宽度的 100%。你能解释一下为什么吗？

Answer 1

这是因为滚动条在正文上(我认为是 firefox 的 html)。相反，您需要将 body 的高度固定为 100%，然后将滚动条移动到列表容器 (33% div):

http://codepen.io/jonigiuro/pen/JEkLH

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.content33percent {
    height: 100%;
    max-height: 100%;
    overflow: scroll;
}