使用CSS制作一个垂直滚动的div

对于100%视口高度使用:

overflow: auto;
max-height: 100vh;

2015-05-29 12:57:23

试试这样。

< span style=" font - family:宋体;身高:400 px;" >

2012-03-14 17:59:07

除了使用错误的属性外，你已经把它覆盖住了。滚动条可以被任意属性overflow、overflow-x或overflow-y触发，并且每个属性都可以被设置为可见、隐藏、滚动、自动或继承中的任意一种。你现在看到的是这两个:

auto -该值将查看框的宽度和高度。如果它们被定义了，它就不会让盒子扩展超过这些边界。相反(如果内容超过了这些边界)，它将为超过其长度的任何一个边界(或两个边界)创建滚动条。 scroll -该值强制滚动条，无论如何，即使内容没有超出边界设置。如果内容不需要滚动，该工具条将显示为“禁用”或非交互式。

如果你总是希望垂直滚动条出现:

你应该使用overflow-y: scroll。这将强制为垂直轴显示滚动条，无论是否需要。如果不能滚动上下文，它将显示为“禁用”滚动条。

如果你只希望滚动框出现滚动条:

只需使用overflow: auto即可。因为在默认情况下，当您的内容无法在当前行中放置时，它会切换到下一行，因此不会创建水平滚动条(除非它位于禁用了换行功能的元素上)。对于垂直栏，它将允许内容扩展到您所指定的高度。如果它超过了这个高度，它将显示一个垂直滚动条来查看其余的内容，但如果它没有超过这个高度，它将不显示滚动条。

2012-03-14 18:12:06

好吧，上面的答案已经很好地解释了一半的问题。为了另一半。

为什么不直接隐藏滚动条本身呢? 这样看起来更吸引人，因为大多数人(包括我)都讨厌滚动条。您可以使用此代码

::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

2020-09-30 04:46:34

参考这个要点:https://gist.github.com/zeoneo/5f9fff92a12aa6d9d42065b5df68e9d5

它可能会帮助您创建一个使用flex和具有自滚动分割窗格的布局。

body { background-color: aquamarine; margin: 0; padding: 0; } .container { height: 100vh; display: flex; flex-direction: column; background-color: bisque; } .left { width: 300px; background-color: lightblue; overflow: auto; scroll-behavior: smooth; } .right { flex:1; background-color: lightcoral; overflow: auto; scroll-behavior: smooth; } .sidebar-item { display: block; height: 100px; background-color: lightseagreen; margin: 5px; } .header { display: block; height: 100px; flex:none; background-color: aqua; } .content { flex:1; background-color: brown; display: flex; overflow: auto; } <html> <head> <title>Hello World</title> </head> <body> <div class="container"> <div class="header"> Header </div> <div class="content"> <div class="left myscroll"> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> </div> <div class="right"> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> <div class="sidebar-item"></div> </div> </div> </div> </body> </html>

2021-06-15 08:46:42

对于100%视口高度使用:

overflow: auto;
max-height: 100vh;

2015-05-29 12:57:23

使用CSS制作一个垂直滚动的div

推荐文章

最新文章

标签