How can I apply a vertical scrollbar to a div with a percentage height?

Tags: html,css,css3,responsive-design

Problem :

I've come across numerous question of the similar nature but my situation is a bit different; my outer container is height 100% instead of a fixed height.

I have a bunch of divs inside a container. They overflow and I want to have a scrollbar to allow scrolling.

This is exactly what I want to achieve:

Except, the link I posted has a fixed height: 200px;. I want to have a percentage height instead.

I've tried setting a percentage height and max-height with no luck. Here's my progress:

How do I get both the fiddles to have the same behaviour but with using percentages instead?

Thanks so much

PS. I know this can be done using Javascript/jQuery but I am looking for a CSS-only solution

Solution :

I think you need set your html and body tag with height:100% so you can use percent like you want

html, body {height:100%}


    CSS Howto..

    How can I use CSS to make a multi-select box but have the label appear on top instead of to the left?

    How not to use body style css rule in part of html code?

    how to position two transparent images to overlap opposite corners of a container div

    How to select inner div in an unordered list

    How to create a progress bar animation

    How can I add an external stylesheet to a UIWebView in Xcode?

    HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

    How to zoom in to a specific point smoothly with CSS?

    How to toggle multiple images in jquery?

    How can I make 2 elements share the same rollover state in CSS?

    How to avoid this hardcoded index.js when use webpack?

    How to position an image list marker so that the text is vertically centered

    How to properly center a 100% width div in css

    How to apply a defined class to a new class in my css?

    How to extend Navigation in CSS

    CSS - How can I center my navigation bar?

    How do I apply a css padding to one element but not its child

    How do I get only two form fields to show instead of all 5 on initial page load? CSS

    CSS: How to specify table's height such that a vertical scroll bar appears?

    how can I access a css class from the appended html div?

    How to reset input element style

    How to set the style of the message in an SWT Text field?

    First and Second touch of a button, how to show images at different times?

    Rails 3: jquery working to switch view with AJAX, how to get an focused state for the link?

    How to make content appear under absolute position

    How to create color custom scrollbar in pure css? [closed]

    How to use if else blocks to decide style in Razor?

    How to find all next siblings from a particular class using css selectors

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How to control number of items per row using media queries in Flexbox?