高 div 打破粘性页脚答案

【问题标题】：high div breaks sticky footer高 div 打破粘性页脚
【发布时间】：2013-04-03 18:50:10
【问题描述】：

我正在开发一个带有粘性页脚的网站。最近我在导航中添加了购物车预览功能。基本上在鼠标悬停时会打开一个 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;
}

我希望有人可以给我一个提示。我真的被这个卡住了。

【问题讨论】：

+1 用小提琴提出格式正确的问题
中断页脚是什么意思？正如我认为您所说的，当列表很长时，列表会下降到页脚。因此，要解决此问题，您可以将 z-index 添加到#cart。 check this fiddle
看滚动条，页脚应该在页面底部，而不是窗口底部。
您为此使用任何服务器端语言吗？

标签： html css sticky-footer

【解决方案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

【讨论】：

这并不能解决页脚无法到达页面底部的问题。
@DanielImms 没错。感谢您确定这一点。我相应地更新了答案
@Sowmya 您的解决方案几乎是正确的。 #cartItems div 的底部出现在#footer 后面。这意味着最后的一些项目将被隐藏。

【解决方案2】：

您在这里几乎没有选择。选择由您决定

向选项面板添加更高的 z-index 并使其显示在页脚的顶部（不好，因为如果项目列表太长，它会向下超出页脚和在页脚之后会显示一些空白区域）。
将overflow:scroll 添加到main div 并允许项目列表下沉到内容（不好，如果下沉则用户看不到内容）。
指定项目列表的最大高度并设置为overflow:scrool（退出ok，但用户需要向下滑动）
使项目列表多列并为项目列表设置一些最大高度（我认为这种方法是可以接受的）（按部门菜单查看亚马逊左侧商店）。
使用 JqueryUI 根据 make short 和分类你的项目列表（不错，但有一些工作要做）。 http://jqueryui.com/accordion/

【讨论】：

感谢您的建议。我喜欢想法 3 和 4。也许我会尝试一下。谢谢！
干杯！你不要把这个标记为答案并为我赢得一些=)
实际上，您的答案对我来说是正确的，尽管高 div 的问题并未 100% 解决（请参阅我对 Sowmya 解决方案的评论）。最后我接受了你的建议。 4（种类;））。我在预览中限制了商品的数量，并在下方放置了一个“查看所有 xx 商品”按钮，该按钮链接到购物车。

【解决方案3】：

这是一个更新的 jsfiddle，它可以让购物车越过页脚 - 看看这是否是您要查找的内容：

http://jsfiddle.net/PMabQ/20/

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: fixed;
    bottom: 0;
    background-color: yellowgreen;
    z-index: 1;
}

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

#cartItems {
    display: none;
}

【讨论】：

它看起来不适合我使用位置：固定在#footer。我想知道，为什么#main div 没有被缩放到身体的 100% 高度。

【解决方案4】：

将页脚的位置更改为fixed

【讨论】：

【解决方案5】：

更改#main div 的溢出：

overflow-x: hidden;
overflow-y: auto;

不要将页脚放入#main div

这就给出了：

http://jsfiddle.net/PMabQ/27/

【讨论】：