CODEWITHSUNDEEP
htmlcss
user1692342
user1692342

Reputation: 5237

Scroll bar for unordered list inside div tag

I have an unordered list inside a div tag and I want the list to be scroll-able if the number of items in the list exceeds the length of the webpage. 

<div style="width: 300px; height:100px; overflow: auto">
    <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    </ul>
</div>

If I hardcode height as 100px, and the number of items exceed this height, a scroll bar appears. However if I make height as 100% the scroll bar does not appear. Could some one let me know where I am going wrong?

You can view the sample code on http://jsfiddle.net/xf7kjcf6/

Upvotes: 3

Views: 5095

Answers (4)

Mr. Alien
Mr. Alien

Reputation: 157334

When you use height: 100%; of any element, you need to ask a question that 100% of what? By defauly, user agents assign height: auto; to certain elements and since the parent element height is auto your 100% does work but it's 100% of the parent (which is set to auto by default) and not the viewport.

Inorder to make it 100% of the viewport you need to set height: 100%; of all the parent element of div and itself in this case it should be 

html, body {
   height: 100%;
}

.a_list {
    width: 300px;
    height: 100%;
    list-style-type: disc;
}

.a_list li {
    padding-left: 20px;
}

Avoid writing inline styles for your <div> element, move them to an external stylesheet and then use height: 100%; and it should work now. Also, you won't need overflow: auto; property as by default it will have a scroll bar.

Demo

Note that if you add any other wrapper element to your div then you need to set the height of that wrapper element to 100% as well.

Last but not the least, you might not be knowing about CSS Reset, so you might need that too.

Upvotes: 3

Taslim
Taslim

Reputation: 75

if you want to use 100% for div then you have to use body and html 100%. normally height auto those are not 100%. 

html,body{
height:100%;

}

Upvotes: 0

Mia Sno
Mia Sno

Reputation: 947

you need to add a parent of 100% height to the body/html tags to make the div a 100% of the window. So add:

body, html {
 height: 100%;
}

And then you can change the div to 100% height as you wish.

Upvotes: 1

drip
drip

Reputation: 12943

Without JS you can do it like this:

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}
<div style="width: 300px; height:100%; overflow: auto">
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

Upvotes: 1

Related Questions