[编辑]
由于大多数答案都是我已经尝试过但不起作用的事情，因为我在评论中看到一些ppl争论使用或不使用java脚本我会考虑js答案。还有人争论某些人的回答并不与某些版本的IE兼容。老实说，我不关心IE，因为它不再是受支持的浏览器了，微软现在有优势，如果你仍然使用古董浏览器，那不是我不太关心它不是一个巨大的项目，如果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：
body {
margin: 0 auto;
}
#navbar {
z-index: 100;
padding: 0;
margin: 0;
position: fixed;
height: 47px;
width: 100%;
top: 0;
left: 0;
right: 0;
}
#navbar > div {
display: inline-flex;
margin-left: -4;
}
#navbar > div a {
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
#content {
margin-top: 60;
margin-bottom: 15px;
}
#footer {
width: 100%;
height: 100px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
我摆脱了视觉css（bg和效果）
答案 0 :(得分：1)
编辑：在这里工作小提琴：https://jsfiddle.net/r6paa676/
粘性页脚可能非常棘手。这是我用来解决粘性页脚问题的资源，因为大多数实现都没有考虑响应性问题。http://blog.karenmenezes.com/2014/jan/14/ryan-faits-sticky-footer-responsive/
这样做的要点是您使用以下代码来计算并按下页脚：
$(document).ready(function(){
$(window).resize(function(){
var footerHeight = $('.footer').outerHeight();
var stickFooterPush = $('.push').height(footerHeight);
$('.wrapper').css({'marginBottom':'-' + footerHeight + 'px'});
});
$(window).resize();
});
这就是你的HTML：
<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>
答案 1 :(得分：0)
我不太了解你，但如果你希望你的页脚始终位于浏览器窗口的底部，请使用position: fixed;而不是absolute。这样，当您滚动到底部时，您的内容将从页脚中隐藏。因此，您可以将margin-bottom或padding-bottom与页脚的高度添加到#content div。
答案 2 :(得分：0)
对flexbox的浏览器支持：http://caniuse.com/#feat=flexbox
对calc的浏览器支持：http://caniuse.com/#feat=calc
有几种方法可以做到这一点。最简单的方法是使用flexbox。您需要为页眉/页脚指定一个固定的高度（请参阅下面的编辑，不需要固定的高度），但要将内容保持在中间动态并为其指定overflow-y: scroll
还记得给body / html一个100%的高度，否则这个不行。最好的部分是，你不需要任何JavaScript，它的纯粹的CSS！ ：）
这是一个例子：
https://jsfiddle.net/ahmadabdul3/of1m2pbe/4/
编辑 - 你不需要使用flexbox给页眉/页脚固定高度。它们也可以是动态的：
https://jsfiddle.net/ahmadabdul3/of1m2pbe/5/
HTML：
<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>
的CSS：
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;
}
如果你不想使用flexbox，因为IE 11只是部分支持它，你可以尝试这种方法：
如果页眉/页脚有静态高度，则可以为主体指定高度值：
height: calc(100% - headerHeight + footerHeight)所以如果页眉/页脚高度为100px
height: calc(100% - 200px)
https://jsfiddle.net/ahmadabdul3/0xj8fu9c/4/
这是我知道的唯一两种干净/简单的方法，可以在没有任何javascript或更复杂的html / css标记的情况下完成此任务
答案 3 :(得分：-1)
检查出来：https://jsfiddle.net/r6paa676/1/
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%
}
答案 4 :(得分：-2)
我找到了一个有一些变化的解决方案......检查出来.. [更新了jsfiddle链接..] https://jsfiddle.net/r6paa676/2/
<?xml version="1.0" encoding="utf-8"?><manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.alpha.ads6">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/Theme.AppCompat">
<meta-data
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.google.android.gms.ads.AdActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
android:theme="@android:style/Theme.Translucent" />
</application>
</manifest>