我在一个带有粘性页脚的网站上工作。最近我在导航中添加了购物车预览功能。基本上在鼠标悬停时会打开一个 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;
}
我希望有人能给我一个提示。我真的坚持这个。
最佳答案
从 #cart
中删除 position:absolute
并使用 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;
}
关于html - 高 div 打破粘性页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15783468/