CODEWITHSUNDEEP
htmlcss
Alias
Alias

Reputation: 3081

HTML/CSS SIdebar with header/footer and scrollable content at full height

I'm basically trying to create a sidebar which is the full browser height within a container (done). The sidebar has a header and footer, where the footer is always stuck to the bottom of the browser. The content between these can then be flexible in size.

I have an example which works if the content does not go past the height:

<div class="container">

    <div class="sidebar">
        <div class="profile">
            Profile Area
        </div>

        <ul class="list">
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>

        <div class="foot">
            Footer area
        </div>
    </div>

    <div class="main"> 
        Content Area
    </div>

</div>

http://jsfiddle.net/w26cm/2/

However, if I start to add more content, I'd like the list to stop pushing the page down (whatever height it is) and form a scroll bar.

A working example of this is Soundclouds sidebar: https://soundcloud.com/

So basically here is the list when it gets too big: http://jsfiddle.net/w26cm/4/

How am I supposed to set the content/list to only be the height of what is left between the header and footer, and any excess turns into a scroll.

Upvotes: 1

Views: 15872

Answers (2)

scooterlord
scooterlord

Reputation: 15339

here you are...

<style>
body,html {
height:100%;
}
.header {
height:40px;
    width:100%;
}
.footer {
height:40px;
width:100%;
    position:absolute;
    bottom:0;
}
.content {
position:absolute;
    width:100%;
top:40px;
bottom:40px;
    overflow-y:auto;
}
</style>

<div class="header">
    profile
</div>
<div class="content">
    content

</div>
<div class="footer">
    footer
</div>

http://jsfiddle.net/Ve8PL/

Upvotes: 3

EthanK
EthanK

Reputation: 759

set the sidebar div css to

max-height://whatever height you want
overflow:scroll;

so when it reaches the height you want it will add the scroll bar. Make sure to take the added width of the scroll bar into consideration when setting the width of the div, too.

if you need to dynamically set the max-height of the div use javascript.

Upvotes: 1

Related Questions