高div打破粘脚footer

Question

我正在一个站点与粘脚。最近，我为导航添加了购物车预览功能。基本上mouseover打开一个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

您在这里有几个选项。选择是由你

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

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

3. 指定最大高度为项列表和使overflow:scrool（退出确定，但用户需要沿着一路下跌双击自动滚屏）

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

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

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

更改页脚位置从#cart和使用

Answer 4

删除

并添加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

Answer 5

更改您的#main div的溢出：

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

不要把你的页脚到您的#main DIV

这给出了：

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