Html 保持页脚在页面底部，但不固定
[编辑] 因为大部分答案都是我已经尝试过的，而且没有用过，自从我在评论中看到一些PPL争论使用或不使用java脚本，我也会考虑JS的答案。也有人在争论一些人的答案与IE的某些版本不兼容。老实说，我不在乎IE，因为它不再是受支持的浏览器，微软现在有edge，如果你仍然使用过时的浏览器，它不符合要求，我真的不在乎它不是一个大项目，如果IE用户有兼容性问题，这就是生活Html 保持页脚在页面底部，但不固定,html,css,Html,Css,[编辑] 因为大部分答案都是我已经尝试过的，而且没有用过，自从我在评论中看到一些PPL争论使用或不使用java脚本，我也会考虑JS的答案。也有人在争论一些人的答案与IE的某些版本不兼容。老实说，我不在乎IE，因为它不再是受支持的浏览器，微软现在有edge，如果你仍然使用过时的浏览器，它不符合要求，我真的不在乎它不是一个大项目，如果IE用户有兼容性问题，这就是生活 简而言之：给我任何有用的，也不用担心的东西 兼容性，只要它在过去几年的大多数浏览器上都能正常工作 更新 [/编辑] 如何将页脚保持
- 简而言之：给我任何有用的，也不用担心的东西 兼容性，只要它在过去几年的大多数浏览器上都能正常工作 更新
<body>
<div id="wrapper">
<center>
<div id="navbar">
<div><a class="current">HOME</a></div>
<div><a>NEWS</a></div>
<div><a>CONTACT</a></div>
</div>
</center>
<div id="content">
<center>
<div class="card">
This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text. This is some random text.
</div>
</center>
</div>
<div id="footer">
</div>
</div>
</body>
我去掉了视觉css（背景和效果）编辑：这里的工作小提琴： 粘性的页脚可能非常棘手。这是我用来解决粘性页脚问题的资源，因为大多数实现没有考虑响应性问题 其要点是使用以下代码计算并向下推压页脚：
$(document).ready(function(){
$(window).resize(function(){
var footerHeight = $('.footer').outerHeight();
var stickFooterPush = $('.push').height(footerHeight);
$('.wrapper').css({'marginBottom':'-' + footerHeight + 'px'});
});
$(window).resize();
});
<div class="wrapper">
<header class="header">
<h1>Some logo</h1>
<ul class="nav">
<li><a href="">Menu Links</a></li>
<li><a href="">Menu Links</a></li>
<li><a href="">Menu Links</a></li>
<li><a href="">Menu Links</a></li>
</ul>
</header>
<main class="main">
<br>
<p>This would be your main content area</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur error deleniti modi ratione dolor culpa nobis fugiat nesciunt obcaecati dignissimos quidem ex at quas illo laudantium voluptates consectetur repellendus.</p>
</main>
<div class="push"></div>
</div> <!-- /wrapper -->
<footer class="footer">
<p>Write some footery stuff here</p>
<p>The kind that no ones cares about :D</p>
<p>The kind of text that is so damn long that your footer height changes on a smaller screen.</p>
<p><a href="http://blog.karenmenezes.com/2014/jan/14/ryan-faits-sticky-footer-responsive" style="color: #fff;">BACK TO DEMO</a></p>
</footer>
一些标志
这将是你的主要内容领域
Lorem ipsum dolor sit amet，奉献精英。这是一个错误的定义，它可以解释为什么没有人会因为自己的行为而受到惩罚
在这里写一些页脚的东西
没有人关心的那一类：D
这种文本太长了，以至于你的页脚高度在更小的屏幕上发生变化
位置：固定而不是绝对值
。这样，当您滚动到底部时，您的内容将从页脚隐藏。因此，您可以将页脚高度的边距底部
或填充底部
添加到#内容
分区中。请查看以下内容：
flexbox的浏览器支持：
对calc的浏览器支持：
有几种方法可以做到这一点。最简单的方法是使用flexbox。你需要给页眉/页脚一个固定的高度（见下面的编辑，不需要固定的高度），但是保持内容在中间的动态，并给它一个<代码>溢出-y：滚动< /代码>
另外，请记住将body/html的高度设置为100%
，否则这将不起作用。最好的部分是，你不需要任何javascript，它是纯css
下面是一个例子：
编辑-不需要使用flexbox为页眉/页脚指定固定高度。它们也可以是动态的：
html:
如果您不想使用flexbox，因为IE 11仅部分支持它，您可以尝试以下方法：
如果页眉/页脚具有静态高度，则可以为正文指定高度值：
高度：计算（100%头部高度+页脚高度）
如果页眉/页脚高度为100px
高度：计算（100%-200px）
这是我所知道的在没有任何javascript或更复杂的html/css标记的情况下实现这一点的唯一两种干净/简单的方法我又找到了一种解决方案，但做了一些更改。。。看看这个。。[更新的JSFIDLE链接..]
我不想把它修好，它在标题里。我想要一个正常的页脚。如果同时修复导航和页脚，将占用太多的页面空间，几乎没有空间显示内容。可能重复：需要注意的是，Flexbox在IE9中不起作用，只在IE10和IE11中提供部分支持。。。所以这并不是最好的方法。@JPeG-OP从未说过它必须在任何特定的浏览器上工作，所以我认为你不应该对此投反对票answer@JPeG哈哈，是你开始的，把你的从我的身上拿下来，我也会这么做。不过，我确实有理由投反对票。你有一个javascript解决方案不，我提供了一个解决方案，可以在IE9的所有现代浏览器中使用，并实际解决了这个问题。我呼吁部分支持Flexbox，你会感到不安，然后你还是去纠正你的帖子。只是证明我是对的。用辱骂和嘲弄的方式。。。非常成熟。如果你想玩游戏，OP并没有说他想要一个javascript解决方案
<div class="wrapper">
<header class="header">
<h1>Some logo</h1>
<ul class="nav">
<li><a href="">Menu Links</a></li>
<li><a href="">Menu Links</a></li>
<li><a href="">Menu Links</a></li>
<li><a href="">Menu Links</a></li>
</ul>
</header>
<main class="main">
<br>
<p>This would be your main content area</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur error deleniti modi ratione dolor culpa nobis fugiat nesciunt obcaecati dignissimos quidem ex at quas illo laudantium voluptates consectetur repellendus.</p>
</main>
<div class="push"></div>
</div> <!-- /wrapper -->
<footer class="footer">
<p>Write some footery stuff here</p>
<p>The kind that no ones cares about :D</p>
<p>The kind of text that is so damn long that your footer height changes on a smaller screen.</p>
<p><a href="http://blog.karenmenezes.com/2014/jan/14/ryan-faits-sticky-footer-responsive" style="color: #fff;">BACK TO DEMO</a></p>
</footer>
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.page-wrapper {
min-height: 100%;
position: relative;
}
footer {
background-color: #f0f;
position: absolute;
bottom: 0;
width: 100%
}
<div class='flex'>
<header>
content
</header>
<article>
<div class='empty'>content</div>
<div class='empty'>content</div>
<div class='empty'>content</div>
<div class='empty'>content</div>
</article>
<footer>
content
</footer>
</div>
html,body {
height: 100%;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
height: 100%;
}
header, footer {
height: 100px;
background-color: white;
}
article {
flex-grow: 1;
overflow-y: scroll;
background-color: tomato;
}
.empty {
height: 100px;
margin: 20px 0;
}
` .page-wrapper {
min-height: 100vh;
position: relative;
}
footer {
background-color: #f0f;
position: absolute;
bottom: 0;
width: 100%
}
.longer {
height: 50px;
background-color: #ddd;
}`