Cam*_*mel 77 css positioning sticky-footer
我需要将我的页脚固定到页面底部并使其居中.页脚的内容可能会一直发生变化,因此我无法通过margin-left将其居中:xxpx; margin-right:xxpx;
问题是由于某种原因,这不起作用:
#whatever {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
我抓了网,一无所获.我试着制作一个容器div和nada.我尝试了其他组合和gurnisht.我怎样才能做到这一点？
谢谢
mar*_*cgg 49
您应该使用粘性页脚解决方案,例如:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
还有其他像这样的人;
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
用html:
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
小智 39
Daniel Kanis修订的代码:
只需更改CSS中的以下行
.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}
并在HTML中:
<p class="enclose problem">
Your footer text here.
</p>
Thi*_*age 26
一个jQuery解决方案
$(function(){
$(window).resize(function(){
placeFooter();
});
placeFooter();
// hide it before it's positioned
$('#footer').css('display','inline');
});
function placeFooter() {
var windHeight = $(window).height();
var footerHeight = $('#footer').height();
var offset = parseInt(windHeight) - parseInt(footerHeight);
$('#footer').css('top',offset);
}
<div id='footer' style='position: fixed; display: none;'>I am a footer</div>
有时候实现JS比破解旧CSS更容易.
小智 5
问题在于position: static.静态意味着对位置完全没有任何意义.position: absolute是你想要的.然而,使元素居中仍然很棘手.以下应该有效:
#whatever {
position: absolute;
bottom: 0px;
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
}
要么
#whatever {
position: absolute;
bottom: 0px;
margin-right: auto;
margin-left: auto;
left: 50%;
transform: translate(-50%, 0);
}
但我推荐第一种方法.我使用了这个答案的居中技巧: 如何将div中的绝对定位元素居中？
我遇到了一个典型的问题position: fixed，但bottom: 0不起作用。发现了一个巧妙的功能position: sticky。请注意，它是“相对”新的，因此 IE/Edge 15 及更早版本不会出现这种情况。
这是 w3schools 的示例。
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: sticky;
bottom: 0;
background-color: yellow;
padding: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dlerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dlerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dlerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dlerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
</body>
</html>