我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。
当前回答
flex解决方案对我来说是有效的，因为它使页脚变得有粘性，但不幸的是，将页面主体改为使用flex布局会使我们的一些页面布局发生变化，而且不是更好的。最后对我有用的是:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
我从ctf0在https://css-tricks.com/couple-takes-sticky-footer/的回复中得到了这个
其他回答
要获得一个粘性页脚:
为你的内容设置一个<div> with class="wrapper"。 在包装器的</div>结束之前放置 < div class = "推" > < / div >。 在包装器的</div>结束后放置 < div class = "脚注" > < / div >。
* {
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 */
}
div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; ｝ <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置，这意味着即使页面被滚动，它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >
保持<main>为min-height 90vh将永远解决您的问题。 下面是基本结构，它将帮助您遵循语义并覆盖整个页面。
第一步:除了页眉和页脚，所有内容都放在主标签内。
<body>
<header>
<!╌ nav, logo ╌>
</header>
<main>
<!╌ section and div ╌>
</main>
<footer>
<!╌ nav, logo ╌>
</footer>
</body>
步骤2:添加min-height: 90vh为主
main{
min-height: 90vh;
}
通常，页眉和页脚的最低高度是70px，所以这种情况下工作良好，尝试和测试!
对于自然的页眉和页脚高度使用CSS Flexbox。
参见JS Fiddle。
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
flex解决方案对我来说是有效的，因为它使页脚变得有粘性，但不幸的是，将页面主体改为使用flex布局会使我们的一些页面布局发生变化，而且不是更好的。最后对我有用的是:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
我从ctf0在https://css-tricks.com/couple-takes-sticky-footer/的回复中得到了这个
