Question

我可以制作全高度div但如果内容长于屏幕，则div保持100％，不是全高。所以，我想全高度固定div。但我无法修复。我使用这种风格;

<div id="left">
content
</div>
<div id="right">
content
</div>

和css;

html,body {height: 100%;background:#fff}
#left {height: 100%; width:200px; position:absolute; top: 0; left:0; background: black;}
#right {height: 100%; margin-left:200px; background: red;}

这是我在#right div中写了太长内容后的结果。

https://jsfiddle.net/hq21zmq8/

如你所见，如果内容长于div，则div不会变长。我该怎么做固定高度？

Answer 1

您想查看css中的overflow attribute。

overflow: auto;

或者如果您总是想要滚动条

overflow: scroll;

应该做的伎俩

Answer 2

如果您想要滚动条

，请添加overflow: scroll

#right {height: 100%; margin-left:200px; background: red; overflow: scroll;}

或

overflow: auto

如果不需要时应隐藏滚动条。正如@Sverri M. Olsen所说：）

Answer 3

如果您希望min-height增长

，请使用div媒体资源

#right {min-height: 100%; margin-left:200px; background: red;}

如果您想要滚动条

，请overflow

#right {height: 100%; margin-left:200px; background: red;overflow: auto;}

Answer 4

将overflow-y:scroll添加到#right，例如

#right {
    height: 100%;
    margin-left:200px;
    background: red;
    overflow-y:scroll;
}

Answer 5

添加overflow: scroll;属性

https://jsfiddle.net/hq21zmq8/7/

Answer 6

添加以下内容：overflow-y: auto

如果需要，这应该添加一个滚动条。

另一件事是，我总是使用height: 100vh。在我看来更容易合作......但这只是个人问题。

css如何使用滚动支持制作全高度div？

6 个答案: