我已经搜索了很长时间并尝试了几种不同的方法，但无法找到解决方案。
我希望我的页脚始终位于页面底部，但不一定总是显示。因此，每当添加足够的帖子时，我希望页面继续增长，但页脚将始终位于底部。您可以在下面的代码段中看到它的工作原理 但是，我不希望帖子位于左侧，或者从顶部开始。每当我尝试使用绝对定位移动页面换行div时，一切都搞定了。
最初受到本文的启发：https://css-tricks.com/snippets/css/sticky-footer/
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -200px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
<a href="#" class="btn btn-primary">Post</a>
</div>
<ul class="posts">
</ul>
</div>
</div>
<div class="site-footer">
</div>
答案 0 :(得分：0)
看看它：
DEMO：https://jsfiddle.net/eLqzhaag/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
position: absolute;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
width: 100%;
height: 100px;
position: fixed;
bottom: 0px;
}
.container {
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
</style>
<script>
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
</script>
</head>
<!-- language: lang-css -->
<!-- language: lang-html -->
<body>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
<a href="#" class="btn btn-primary">Post</a>
</div>
<ul class="posts">
</ul>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
width: 520px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
</div>
</div>
</div>
<div class="site-footer">
</div>
</body>
</html>
答案 1 :(得分：0)
为了使您的内容居中，您可以向左侧和右侧提供.page-wrap宽度和自动边距：
.page-wrap {
...
width: 50%;
margin: 0 auto -200px auto;
}
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
width: 50%;
background: lightblue;
margin: 0 auto -200px auto;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
<a href="#" class="btn btn-primary">Post</a>
</div>
<ul class="posts">
</ul>
</div>
</div>
<div class="site-footer">
</div>