html - 高 div 打破粘性页脚

Question

我在一个带有粘性页脚的网站上工作。最近我在导航中添加了购物车预览功能。基本上在鼠标悬停时会打开一个 div 以显示购物车内的商品。实际上没什么特别的。

当元素列表变得很长时，问题首先出现。包含元素的 div 以某种方式破坏了粘性页脚。

为了演示我制作的行为 jsFiddle example .

我的 HTML 看起来像这样:

<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;
}

我希望有人能给我一个提示。我真的坚持这个。

Answer 1

从 #cart 中删除 position:absolute 并使用 float:right

并将overflow:auto添加到#main，使其根据购物车元素增加。

* {
    margin:0;
    padding:0;
}

html, body {
    height: 100%;
}

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

#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;
    float:right;
    background-color: red;
}

#cartItems {
    display: none;
}

DEMO