high div breaks sticky footer

Question

I'm working on a site with a sticky footer. Recently I added a shopping cart preview functionality to the navigation. Basically on mouseover a div opens up to show the items inside the shopping cart. Nothing special actually.

The problem occurs first when the item list becomes very long. The div containing the items somehow breaks the sticky footer.

To demonstrate the behaviour I've made a jsFiddle example.

My HTML looks like this:

<div id = "main">
    <div id = "navigation">
        navigation
        <div id = "cart">
            cart
            <div id = "cartItems">
                <p>item 1</p>
                <p>item 2</p>
                <p>item 3</p>
                <p>...</p>
            </div>
        </div>
    </div>
    <div id = "content">content</div>
    <div id = "footer">footer</div>
</div>

CSS:

* {
    margin:0;
    padding:0;
}

html, body {
    height: 100%;
}

#main {
    width: 900px;
    min-height: 100%;
    margin: 0 auto;
    position: relative;
    background-color: lightpink;
}

#navigation {
    height: 50px;
    position: relative;
    background-color: orange;
}

#content {
    padding-bottom: 50px;
}

#footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
    background-color: yellowgreen;
}

#cart {
    width: 100px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
}

#cartItems {
    display: none;
}

I hope, somebody can give me a hint. I'm really stuck on this one.

Answer 1

You have few options here. Selection is up to you

1. Add higher z-index to option panel and make it to show top of the footer (not good because if the item list is too long then it will go down beyond the footer and after footer it will show some empty area).

2. Add overflow:scroll to the main div and allow item list to sink to the content (not good, If it is sink then user cannot see the content).

3. Specify a max height to the item list and make overflow:scrool (Quit ok, but user need to scrool along the way down)

4. Make item list multi-column and set some max height to item list (I think this method is acceptable) (look at amazon left side shop by department menu).

5. Use JqueryUI according to make short and categorize your item list (Not bad, but have some works to do). http://jqueryui.com/accordion/