2

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

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

为了演示我制作了一个jsFiddle 示例的行为。

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

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

4

5 回答 5

1

删除position:absolute并#cart使用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;
}

演示

于 2013-04-03T09:31:37.333 回答
0

这是一个更新的 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;
}
于 2013-04-03T09:30:32.977 回答
0

将页脚的位置更改为fixed

于 2013-04-03T09:30:39.917 回答
0

更改#main div 的溢出：

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

不要将页脚放入#main div

这给出了：

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

于 2013-04-03T09:39:47.780 回答
0

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

  1. 将更高的 z-index 添加到选项面板并使其显示在页脚的顶部（不好，因为如果项目列表太长，那么它会超出页脚，在页脚之后会显示一些空白区域）。

  2. 添加overflow:scroll到maindiv 并允许项目列表下沉到内容（不好，如果是下沉则用户看不到内容）。

  3. 指定项目列表的最大高度并制作overflow:scrool（退出确定，但用户需要一路向下滑动）

  4. 使项目列表多列并为项目列表设置一些最大高度（我认为这种方法是可以接受的）（按部门菜单查看亚马逊左侧商店）。

  5. 使用 JqueryUI 根据使简短和分类您的项目列表（不错，但有一些工作要做）。http://jqueryui.com/accordion/

于 2013-04-03T09:45:24.650 回答