代码之家 › 专栏 › 技术社区 › Alexxus

高div断开粘性页脚

sticky-footer css html

Alexxus · 技术社区 · 12 年前

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

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

5 回复 | 直到 12 年前

Sowmya 12 年前

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

DEMO

Nayana Adassuriya 12 年前

你在这里没有什么选择。选择由您决定

向选项面板添加更高的z索引,并使其显示页脚的顶部( 不好的 因为如果项目列表太长,那么它将向下超出页脚,并且在页脚之后,它将显示一些空白区域)。
添加 overflow:scroll 到 main div并允许项目列表下沉到内容( 不好的 ,如果是接收器,则用户无法看到内容)。
指定项目列表的最大高度并使 overflow:scrool (可以退出,但用户需要一路往下爬)
使项目列表多列,并为项目列表设置一些最大高度(我认为这种方法是可以接受的)(查看亚马逊左侧的部门菜单)。
使用JqueryUI来缩短项目列表并对其进行分类(不错,但还有一些工作要做)。 http://jqueryui.com/accordion/

Billy Moat 12 年前

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

micadelli 12 年前

将页脚的位置更改为 fixed

Shikiryu DhruvJoshi 12 年前

更改#main div的溢出:

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

不要将页脚放在#main div中

这说明:

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