Html 高div断开粘性页脚

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

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

来证明我的行为

我的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>

---

我希望有人能给我一个提示。我真的被这一点困住了。

这里有一个更新的JSFIDLE，它可以让购物车越过页脚-看看这是否是您想要的：

CSS:

---

将页脚的位置更改为固定的，并使用浮动：右

并将

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;

}

---

更改您的#主分区的溢出：

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

不要将页脚放在#主div中

因此：

---

您在这里几乎没有选择。选择权在你

向选项面板添加更高的z索引，并使其显示页脚顶部（不好，因为如果项目列表太长，则它将向下延伸到页脚之外，页脚后将显示一些空白区域）

添加

溢出：滚动
到
main
div并允许项目列表下沉到内容（不好，如果是下沉，则用户无法看到内容）

指定项目列表的最大高度，并使

溢出：scrool

（退出ok，但用户需要向下滚动）

将商品列表设为多列，并为商品列表设置一些最大高度（我认为这种方法是可以接受的）（查看亚马逊左侧的“按部门开店”菜单）

使用JqueryUI根据简短的内容对项目列表进行分类（不错，但还有一些工作要做）

---

+1对于格式良好的小提琴问题，打断页脚是什么意思？正如我想你们所说的，当列表很长时，列表会一直延伸到页脚。因此，要解决这个问题，您可以将z-index添加到#cart。查看滚动条，页脚应该在页面底部，而不是窗口底部。是否使用任何服务器端语言进行此操作？这并不能修复页脚不在页面底部的问题。@DanielImms：正确。谢谢你的指认。我更新了答案accordingly@Sowmya你的解决方案几乎是正确的。#cartItems div的底部显示在#页脚后面。这意味着最后的一些项目将被隐藏。使用#页脚上的position:fixed对我来说不合适。我想知道为什么主div没有被缩放到身体的100%高度。谢谢你的建议。我喜欢第三和第四个想法。也许我会试试。谢谢干杯你不认为这就是答案，并为我赢得一些=）事实上，你的答案对我来说是正确的，尽管高div的问题并没有100%解决（见我对Sowmya解决方案的评论）。最后，我接受了你的第四条建议。我已经限制了预览中的项目数量，并在下面放置了一个按钮“查看所有xx项目”，该按钮链接到购物车。

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

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