使用CSS使div垂直滚动

新手上路,请多包涵

这个

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

给出 div 用户可以水平和垂直滚动。如何更改它以便 div 只能 垂直滚动?

原文由 Saswat 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 390
2 个回答

除了使用错误的属性外,您已经涵盖了它。 The scrollbar can be triggered with any property overflow , overflow-x , or overflow-y and each can be set to any of visible , hidden , scroll , auto , or inherit .您当前正在查看这两个:

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

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

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

您应该使用 overflow-y: scroll 。无论是否需要,这都会 强制 为垂直轴显示一个滚动条。如果您实际上无法滚动上下文,它将显示为“已禁用”滚动条。

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

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

原文由 animuson 发布,翻译遵循 CC BY-SA 3.0 许可协议

像这样尝试。

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

原文由 Milap 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏