6 css css-position sticky-footer
我遇到以下html布局的问题.
我知道有关于绝对定位和粘性页脚的其他问题,我尝试了很多解决方案,但我没有做到这一点,所以我试图发布整个布局HTML代码,看看是否有人可以找到解决方案.
我使用了这个 StickyFooter解决方案.
问题是正确的吧.
它应该保持固定在距离页脚25px的位置,但是,正如您所看到的,如果条形内容增长,内容将在页脚下方和条形底部边框之外下降.
显然我会将内容留在栏内,导致栏杆长大并将页脚向下推.
<!doctype html>
<head>
<style type="text/css">
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footerPage, #divPush
{
height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */
body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }
div.wrapper { background-color:#fff; position:relative; }
#headerPage { }
#divHeaderImg { height:100px; }
#navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
#divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }
#sectionBar {
z-index:1000;
position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
}
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>
</head>
<body>
<div class="wrapper">
<div id="sectionBar">
<div id="divBarContent">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis.
</div>
</div>
</div>
<div id="headerPage">
<div id="navPage">menu</div>
<div id="divHeaderImg"></div>
<div id="divSubMenu">sub menu</div>
</div>
<div id="sectionPage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
</div>
<div id="divPush"></div>
</div>
<div id="footerPage">footer</div>
</body>
</html>
我会删除position:absolute;并添加一个float:right;in#sectionBar定义。<br clear="all" />然后在关闭 div 之前添加一个“wrapper”类。
然后你将不得不重新定位你的元素。对边距和填充进行处理以获得所需的结果。
您所描述的问题是由position:absolute行为引起的。事实上，通过绝对定位，元素会从 html 的自然流中移除，顾名思义，绝对定位:) 因此，其他元素（例如页脚）会位于它的“下方”。