How to make html list scrollable downwards on fullscreen page?


Tags: html,css,html-lists

Problem :

I am trying to put a list, that is scrollable, inside a div. My content takes up 100% of the page.

I use this code for my list:

ul {
    height: 100%;
    overflow-y: scroll;
}

However when I add items to the list, it expands beyond the page size and it continues on even after the true 100% of the page (being 768px in full screen for me) is used up. You can see it not working here: http://jsfiddle.net/BDUMw/7/

If you copy <li> several times, you will see that <ul> is extending further below the page.

How can I make the following CSS work within the 100% page with hidden overflow?



Solution :

Put overflow-y:scroll; in your #contacts_container CSS.

Here's a JSFiddle to show it. http://jsfiddle.net/Agony/JGssW/


    CSS Howto..

    How can I prevent a bookmark from changing style when moving the cursor over it?

    How can I split code-blocks into a list?

    How can I push the first row of images down?

    How to use css to crop parts of an image

    How to animate through stacked images Javascript

    How to make sidebar horizontal for xs devices

    How to make a div a link as it transitions in CSS

    how to call td's id to change css style onclick

    Overflow-x and overflow-y properties, how should they work? [duplicate]

    How to determine CSS attribute is set on the element?

    How to position some text?

    How to make common reusable css for almost every common things in web design?

    PNG background image not showing in IE 8< using html5?

    How to set css cursor value to variable within jQuery?

    AngularJS ng-show directive showing elements before hiding elements

    How to get a css property of an externally styled element with javascript

    How to make an element stretch to the same height as its container?

    CSS how to hide resize divs while keeping it centerd

    how to display data in html

    How can I use a CSS transform to vertically-center two overlapping elements?

    How can I increase the size of twitter bootstrap carousel navigation arrows

    How to close the menu after click third layer menu item

    Wordpress: How to add a caption right-aligned to the edge of the image

    How do I show a handle to indicate to the user that a panel is resizable?

    How to edit ol tags in rich text editor

    How to stop one layer going over another

    how to make NGINX serve static content like .js, .css, .html?

    How to create an image hover fade effect with jQuery and CSS?

    How to remove spacing between tags?

    How can I create an overlay that stays in DOM as opacity 0 but doesn't prevent content from being clickable?