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

This

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

提供一个div，用户可以在水平和垂直方向上滚动。我如何改变它，使div只能垂直滚动?

当前回答

对于100%视口高度使用:

overflow: auto;
max-height: 100vh;

2015-05-29 12:57:23

其他回答

对于100%视口高度使用:

overflow: auto;
max-height: 100vh;

2015-05-29 12:57:23

您可以使用这段代码。

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x: The overflow-x property specifies what to do with the left/right edges of the content - if it overflows the element's content area. overflow-y: The overflow-y property specifies what to do with the top/bottom edges of the content - if it overflows the element's content area. Values visible: Default value. The content is not clipped, and it may be rendered outside the content box. hidden: The content is clipped - and no scrolling mechanism is provided. scroll: The content is clipped and a scrolling mechanism is provided. auto: Should cause a scrolling mechanism to be provided for overflowing boxes. initial: Sets this property to its default value. inherit Inherits this property from its parent element.

2015-04-15 12:48:14

试试这样。

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

2012-03-14 17:59:07

使用overflow-y: auto;在div上。

此外，您还应该设置宽度。

2012-03-14 17:59:37

参考这个要点: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

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

推荐文章

最新文章

标签