Html 使用 CSS 使 div 可垂直滚动

Making a div vertically scrollable using CSS

提问by Saswat

This

这个

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

gives a divthat the user can scroll in both in horizontally and vertically. How do I change it so that the div is onlyscrollable vertically?

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

回答by animuson

You have it covered aside from using the wrong property. The scrollbar can be triggered with any property overflow, overflow-x, or overflow-yand each can be set to any of visible, hidden, scroll, auto, or inherit. You are currently looking at these two:

除了使用错误的属性之外，您还涵盖了它。滚动条可与任何财产被触发overflow，overflow-x或者overflow-y每个人都可以被设置为任意的visible，hidden，scroll，auto，或inherit。您目前正在查看这两个：

• auto- This value will look at the width and height of the box. If they are defined, it won't let the box expand past those boundaries. Instead (if the content exceeds those boundaries), it will create a scrollbar for either boundary (or both) that exceeds its length.

• scroll- This values forcesa scrollbar, no matter what, even if the content does not exceed the boundary set. If the content doesn't need to be scrolled, the bar will appear as "disabled" or non-interactive.

• auto- 此值将查看框的宽度和高度。如果定义了它们，则不会让框扩展到这些边界之外。相反（如果内容超过这些边界），它将为超过其长度的任一边界（或两者）创建一个滚动条。

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

If you alwayswant the vertical scrollbar to appear:

如果您总是希望出现垂直滚动条：

You should use overflow-y: scroll. This forcesa scrollbar to appear for the vertical axis whether or not it is needed. If you can't actually scroll the context, it will appear as a"disabled" scrollbar.

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

If you only want a scrollbar to appear if you can scroll the box:

如果您只想在可以滚动框的情况下显示滚动条：

Just use overflow: auto. Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won't be created (unless it's on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified. If it exceeds that height, it will show a vertical scrollbar to view the rest of the content, but will not show a scrollbar if it does not exceed the height.

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

回答by Milap

Try like this.

像这样尝试。

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

回答by VVS

For 100% viewport height use:

对于 100% 视口高度使用：

overflow: auto;
max-height: 100vh;

回答by Madara's Ghost

Use overflow-y: auto;on the div.

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

Also, you should be setting the width as well.

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

回答by DJ18

You can use this code instead.

您可以改用此代码。

<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.
inheritInherits this property from its parent element.

overflow-x： overflow-x 属性指定如何处理内容的左/右边缘 - 如果它溢出元素的内容区域。
overflow-y：overflow-y 属性指定如何处理内容的顶部/底部边缘 - 如果它溢出元素的内容区域。可见

值：默认值。内容不会被剪裁，它可能会呈现在内容框之外。hidden：内容被剪裁 - 并且没有提供滚动机制。scroll: 内容被剪裁并提供滚动机制。auto：应该为溢出的框提供滚动机制。initial：将此属性设置为其默认值。





继承从其父元素继承此属性。

回答by Santosh Khalse

You can use overflow-y: scrollfor vertical scrolling.

您可以overflow-y: scroll用于垂直滚动。

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>

回答by Helzgate

The problem with all of these answers for me was they weren't responsive. I had to have a fixed height for a parent div which i didn't want. I also didn't want to spend a ton of time dinking around with media queries. If you are using angular, you can use bootstraps tabset and it will do all of the hard work for you. You'll be able to scroll the inner content and it will be responsive. When you setup the tab, do it like this: $scope.tab = { title: '', url: '', theclass: '', ative: true };... the point is, you don't want a title or image icon. then hide the outline of the tab in cs like this:

对我来说，所有这些答案的问题在于它们没有响应。我必须为我不想要的父 div 设置一个固定的高度。我也不想花大量时间处理媒体查询。如果您使用的是 angular，则可以使用 bootstraps tabset，它会为您完成所有繁重的工作。您将能够滚动内部内容，它会做出响应。当您设置选项卡时，请这样做：$scope.tab = { title: '', url: '', theclass: '', ative: true };...关键是，您不需要标题或图像图标。然后在 cs 中隐藏选项卡的轮廓，如下所示：

.nav-tabs {
   border-bottom:none; 
} 

and also this .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}and finally to remove the invisible tab that you can still click on if you don't implement this: .nav > li > a {padding:0px;margin:0px;}

还有这个.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}，最后删除不可见的标签，如果你不实现这个，你仍然可以点击：.nav > li > a {padding:0px;margin:0px;}