Making a div vertically scrollable using CSS

Question

This   x000D   x000D   lt div id    style  overflow scroll  height 400px   gt  x000D   x000D   x000D    gives a div that the user can scroll in both in horizontally and vertically  How do I change it so that the div is only scrollable vertically

User · Answer

Well the above answers have give a good explanations to half of the question. For the other half.

Why don't just hide the scroll bar itself. This way it will look more appealing as most of the people ( including me ) hate the scroll bar. You can use this code

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

User · Answer

For 100  viewport height use   overflow  auto  max-height  100vh

User · Answer

You can use this code instead    lt div id    style  overflow-y scroll  overflow-x hidden  height 400px   gt     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

User · Answer

You have it covered aside from using the wrong property  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  You are currently looking at these two    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 forces a 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    If you always want the vertical scrollbar to appear   You should use overflow-y  scroll  This forces a 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   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

User · Answer

Try like this    x000D   x000D   lt div style  overflow-y  scroll  height 400px   gt  x000D   x000D   x000D

User · Answer

Use overflow-y  auto  on the div   Also  you should be setting the width as well

User · Answer

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     nav-tabs      border-bottom none        and also this  nav-tabs  gt  li active  gt  a   nav-tabs  gt  li active  gt  a hover   nav-tabs  gt  li active  gt  a focus  border none   and finally to remove the invisible tab that you can still click on if you don t implement this   nav  gt  li  gt  a  padding 0px margin 0px

User · Answer

You can use overflow-y  scroll for vertical scrolling    x000D   x000D   lt div  style  overflow-y scroll  height 400px  background gray  gt  x000D    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  x000D     x000D    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  x000D     x000D    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  x000D     x000D    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  x000D     x000D    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  x000D     x000D    lt  div gt  x000D   x000D   x000D

[html] Making a div vertically scrollable using CSS

Examples related to html

Examples related to css