html - 使用 CSS 使 div 可垂直滚动

标签 html css

这个

<div id="" style="overflow:scroll; height:400px;">

给出一个div,用户可以在水平和垂直方向上滚动。如何更改它以使 div 可垂直滚动?

最佳答案

除了使用错误的属性之外,您还可以解决它。滚动条可以使用任何属性 overflowoverflow-xoverflow-y 触发,并且每个属性都可以设置为 中的任何一个可见隐藏scrollautoinherit。您目前正在查看以下两个:

  • auto - 此值将查看框的宽度和高度。如果它们被定义,它不会让盒子超出这些边界。相反(如果内容超出了这些边界),它将为超出其长度的任一边界(或两者)创建滚动条。

  • scroll - 这个值 forces 滚动条,无论如何,即使内容没有超出设置的边界。如果内容不需要滚动,该栏将显示为“已禁用”或非交互式。

如果您总是希望显示垂直滚动条:

你应该使用 overflow-y:scroll。这强制一个滚动条出现在垂直轴上,不管它是否需要。如果您不能真正滚动上下文,它将显示为“禁用”滚动条。

如果您只希望在可以滚动框的情况下出现滚动条:

只需使用 overflow: auto。由于默认情况下您的内容在当前行无法容纳时会中断到下一行,因此不会创建水平滚动条(除非它位于禁用自动换行的元素上)。对于垂直条,它将允许内容扩展到您指定的高度。如果超过该高度,它将显示一个垂直滚动条以查看其余内容,但如果它不超过该高度,则不会显示滚动条。

关于html - 使用 CSS 使 div 可垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9707397/

相关文章:

php - 打开 ssl 会破坏网站

php - HTML、CSS、PHP、Javascript 等方面最好的书籍是什么

javascript - 使用 AngularJS 动画起始页

html - 使用 vertical-align : bottom doesn't work 对齐元素

html - 为什么相同的代码不会在我的浏览器中产生与在 Codeply 中相同的结果?

javascript - 如何在 html 和 javascript 中放置“停止”和“重置”按钮

html - div 具有三个子 div 的内部 css 问题

javascript - 响应式导航栏不出现

html - Bootstrap 4 的 Select2 样式错误

html - IE的css 'pointer-events'属性替代