CODEWITHSUNDEEP
jqueryhtmlcssscrollbar
user1612619
user1612619

Reputation: 37

Adding a scrollbar if element doesn't fit on screen

I have like this:

        <li class="1"><a href="#">Link</a>
            <ul>
                <li class="item1"><a href="#">1</a></li>
                <li class="item2"><a href="#">2</a></li>
                <li class="item3"><a href="#">3</a></li>
            </ul>
        </li>

When i press Link, those ul items will slide down, but if theres too many of them, they slide off the screen. What i need to do so if theres many ul items and they start to slide down, it would stopp at the end of the screen and a scrollbar appears for thos ul links. Defining height isn't what i am looking for. I hope it is understandable:) Thanks.

Upvotes: 2

Views: 4505

Answers (2)

Chris
Chris

Reputation: 26878

In order to limit the li and to prevent it from exceeding the page's "end", you need to use some jQuery/JavaScript, I believe. Here's a snippet that should do what you expect:

var li = $(".item2");
var ul = $(".menu");
var bottom = ul.offset().top + ul.height();
var lim = $("body").height() - bottom + li.height();
li.css({"max-height":lim, "overflow-y":"auto"});

Also make sure you have this in your CSS:

body, html {
    height: 99%;
}

Hope that helped!

Upvotes: 1

Huangism
Huangism

Reputation: 16438

I think all you have to do is set a max-height on the outter most li and have overflow: scroll on it

max-height: 50px;
overflow: scroll;

Something like this http://jsfiddle.net/yC32A/

It seems overflow: auto works as well

wit overflow: auto http://jsfiddle.net/yC32A/1/

Upvotes: 2

Related Questions