Fixed Element Overflow

Question

I'm trying to get the #sidebar element to scroll overflow once the browser window is shorter than it's minimum height but can't seem to get it working. Any idea why?

http://jsfiddle.net/q5jKM/1/

CSS - Sorry I cant get this funky formatting working.

html,body{height:100%;margin:0}
#sidebar {
    width: 20em;
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index:2;
    color: #ffffff;
    background-color: #333333;  
    overflow:auto;
    min-height: 34em;
}

#sidebar .nav {
    width: 3em;
    float: right;
    overflow: auto;
    background-color: #2e2e2e;
    border-left: 2px groove #454545;
    height: 100%;
    position:relative;  
}

#sidebar .content {
    height: 100%; 
    width: 16.875em; /*    17-(2/16)   - 20em - .nav - nav border*/
    float:left; 
    position:relative;
}

#sidebar .top {
    position:absolute;
    top:0;
}
#sidebar .bottom {
    position:absolute;
    bottom:0;
}

#sidebar .middle {
    position: absolute;
    bottom: 12em;       /*  3.125*3  */
    top: 16em;          /*  3.125*4  */
    background: green;
}

.content .middle {
    overflow:auto;
}


#sidebar .content > div {width: 16.875em; } /*.top .middle .bottom*/
#sidebar .nav > div {width:3em; } /*.top .middle .bottom*/


    /*table-cell trying get vertical-align working*/
#sidebar .table-cell {display:table-cell;}
#sidebar .middle .table-cell {vertical-align: middle;}


#sidebar .content p, #sidebar .content li, #sidebar .content img {font-size: .75em; color: #dddddd;}

#sidebar ul {margin:0; padding: 0;}






#sidebar .nav li {
    padding: .5625em;
    list-style:none;
}
#sidebar .nav li img {
    height: 1.875em;
    width: 1.875em
}

#sidebar .nav .top li { border-bottom: 2px groove #454545 }
#sidebar .nav .bottom li { border-top:  2px groove #454545 }




.content li {
    position:relative;
    display:block;
    background-color: #444;
    padding: .72em;
    border-radius: .8em;
    border-bottom: 1px solid #292929;
    border-top: 1px solid #4c4c4c;
    text-align: center;
    font-size: 1em;
    letter-spacing: .1em;
    font-weight: normal;
    height: 1.2em;
}

.content li:after {
    content:"";
    position:absolute;
    display:block; 
    width:0;
    top:.11em; /* controls vertical position */
    right:-.852em; /* value = - border-left-width - border-right-width */
    border-style:solid;
    border-width:1.2em 0 1.2em 1.2em;
    border-color:transparent #444;
}

.content .top li{margin: .95em 0 1.9em 0;}
.content .bottom li{margin: 1.9em 0 .95em 0;}

.content .logo {
    text-align: center;
    padding: 1em 0 2em 0;
    width: 100%;
    border-bottom: 2px groove #454545;
}
.content p.welcome {
    text-align: center;
    line-height: 1.5em;
    margin: 1em 0;
}

HTML

    <div id="sidebar">


            <div class="nav">
            <div class="top">
            <ul>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
            </ul>
            </div>
            <div class="middle"><div class="table-cell"><p>test</p></div></div>
            <div class="bottom">
            <ul>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
                <li><img src="_images/attributes/attribute2.svg"></li>
            </ul>
            </div>
            </div>



            <div class="content">
                <div class="top">
                <ul>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                </ul>
                </div>
                <div class="middle"><div class="table-cell">
                <div class="logo"><img src="_images/g.svg"></div>
                <p class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
                </div></div>
                <div class="bottom">
                <ul>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                    <li>SIDEBAR LINK</li>
                </ul>
                </div>
                </div>
    </div>

Ryan King · Accepted Answer · 2013-01-23 11:59:00Z

4

Got it!

Add: - So that #sidebar's is equal to the browser window.

#sidebar{height:100%}

And add: - To provide content that overflows.

#sidebar .nav, #sidebar .content {min-height:34em}

Once the browser window becomes shorter than 34ems #sidebar will overflow.

answered Jan 23, 2013 at 11:59

Ryan King

3,70612 gold badges51 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomas Ramirez Sarduy · Accepted Answer · 2013-01-23 06:59:10Z

3

You just need to add a CSS media query rule:

@media all and (min-height: 34em) { 
    #sidebar{
        overflow: scroll;
    }
}

Once the browser height is less than 34em, then the overflow: scroll rule will be added to the #sidebar.

answered Jan 23, 2013 at 6:59

Tomas Ramirez Sarduy

17.5k8 gold badges74 silver badges86 bronze badges

5 Comments

Ryan King Over a year ago

I just tried it (it should be max-height as I'm sure you know) and after widening #sidebar to 22em (so that .content didn't wrap when the scroll bar was added) it didn't work. I'm told it doesn't know to scroll because absolute positioning removes elements from the flow making #sidebar empty.

Tomas Ramirez Sarduy Over a year ago

mmm... and why are you using position:fixed on #sidebar?

Ryan King Over a year ago

It's a fixed navigation so matter where you scroll it stays in the same position. This here is to handle the case that the browser window is too small to display all icons.

Ryan King Over a year ago

Got it! #sidebar's height needs to be 100% so it equals the browser window height. Then set .content & .nav to have min-heights of 34em so it overflows #sidebar's height.

Tomas Ramirez Sarduy Over a year ago

@RyanKing yep, I was suggest to add height:100% ;) just be carefull with z-index

William Buttlicker · Accepted Answer · 2013-01-23 05:57:06Z

0

Use overflow scroll instead of auto

See this http://jsfiddle.net/q5jKM/2/

answered Jan 23, 2013 at 5:57

William Buttlicker

6,0005 gold badges36 silver badges59 bronze badges

1 Comment

Ryan King Over a year ago

Sorry maybe I wasn't clear enough. I would only like it to overflow once the browser window is shorter than min-height. If otherwise I would like there to be no scroll bar. Overflow:scroll isn't what I'm looking for sorry.

Bryan · Accepted Answer · 2013-01-23 07:24:23Z

0

I got this to work using jquery - you need to get the height of the browser and adjust the css overflow to scroll when it reaches a certain height

var heightToScroll = 600;
var viewHeight = $(window).height();
$(window).resize(function() {
if(viewHeight < heightToScroll){
    $('#sidebar').css("overflow","scroll");
}
});

http://jsfiddle.net/q5jKM/3/

answered Jan 23, 2013 at 7:24

Bryan

3,5041 gold badge21 silver badges23 bronze badges

Collectives™ on Stack Overflow

Fixed Element Overflow

4 Answers 4

Comments

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related