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

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

并将overflow:auto添加到#main，以便根据购物车项目增加。{/ p>

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

Answer 2

这是一个更新的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;
}

Answer 3

将页脚的位置更改为fixed

Answer 4

更改#main div：

的溢出

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

不要将您的页脚放入#main div

这就是：

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

Answer 5

这里你的选择很少。选择取决于你

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

高div打破粘性页脚

5 个答案: