我的问题来自页脚。目前它位于页面的底部，如果所有其他方法都失败了，我会接受，但我想要的是页脚紧跟在内容之后，即删除html,body {height:100%}声明。但是，我希望页脚占用任何剩余的可见空间（如果有的话）。我问的是因为我擅长编程语言，并且很可能在Javascript中解决这个问题，但CSS从来都不是我的强项，我相信这可能以前已经完成了。
我正在使用Twitter Bootstrap进行大部分布局，并在必要时添加自己的CSS。
我建议使用codepen进行查看，因为代码段编辑器似乎很小，因此您可以获得该网页的移动版本。
http://codepen.io/anon/pen/bdzMGY
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom: 100px;
}
.footer.panel-footer {
margin-top: -101px;
height: auto;
min-height: 101px;
background-color: #090909;
color: #9f9f9f;
border-radius: 0;
font-size: 12px;
}
.row.auto-height {} .main.container-fluid {
padding: 0;
margin: 0;
}
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: fantasy;
}
aside.sidebar-panel h4 {
border-bottom: 1px dashed black;
}
header.navbar[role="navigation"] {
margin-bottom: 0;
}
article header a {
color: inherit;
}
div.push-page {
height: 5px;
}
aside {
background-color: hsl(220, 70%, 50%);
}
aside a {
color: white;
height: 100%;
}
aside input.form-control[type="search"]:focus {
box-shadow: 0px 0px 5px blue inset;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<!-- Begin Navbar -->
<header class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Class Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">-All-</a>
</li>
<li><a href="#">Period 1</a>
</li>
<li><a href="#">Period 2</a>
</li>
<li><a href="#">Period 3</a>
</li>
<li><a href="#">Period 5</a>
</li>
<li><a href="#">Period 6</a>
</li>
</ul>
</li>
<li><a href="#">About Me</a>
</li>
<li><a href="#">Log in</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</header>
<!-- End Header Nav -->
<!-- Main Section -->
<section class="container-fluid">
<section class="row auto-height">
<aside class="col-sm-3 col-xs-12 pull-right">
<h3>Sidebar</h3>
<ul class="nav nav-pills nav-stacked navbar-collapse">
<li>
<form action="#" method="get">
<div class="input-group">
<input type="search" name="s" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</li>
<li><a href="#">Register</a>
</li>
</ul>
</aside>
<div class="push-page"></div>
<main class="col-sm-9">
<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might
say something like this:</p>
<blockquote>
<p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
</blockquote>
<p>…or something like this:</p>
<blockquote>
<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p>
</blockquote>
<p>As a new WordPress user, you should go to <a href="http://jhecht.dev/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
</main>
</section>
</section>
<!-- /main end main section -->
</div>
<!-- End wrapper div -->
<footer class="footer panel-footer">
<section class="container">
<div class="row">
<div class="col-md-4 col-xs-6 pull-right">
<h5 class="text-center hidden-xs">Contact Info <span class="fa fa-comments"></span></h5>
<h5 class="visible-xs">Contact Info <span class="fa fa-comments"></span></h5>
<dl class="dl-horizontal">
<dt>Phone</dt>
<dd><a href="tel:5102311423"><span class="glyphicon glyphicon-earphone"></span> (123) 456-7890</a>
</dd>
<dt>Email</dt>
<dd><a href="mailto:email@domain.com"><span class="glyphicon glyphicon-envelope"></span> email@domain.com</a>
</dd>
<dt>Facebook</dt>
<dd><a href="//facebook.com/link"><span class="fa fa-facebook-square"></span> FAcebook</a>
</dd>
<dt>Twitter</dt>
<dd><a href="//twitter.com/user"><span class="fa fa-twitter"></span> @Twitter</a>
</dd>
</dl>
</div>
<div class="col-md-2 col-xs-6">
<h5>Other Resources <span class="glyphicon glyphicon-folder-open"></span></h5>
<ul class="list-unstyled">
<li>Yeah, other resources</li>
</ul>
</div>
</div>
<div class="col-xs-12 text-center">
©
<br class="visible-xs"><small>Powered By <a href="//getbootstrap.com">Bootstrap</a>, <a href="//wordpress.com">Wordpress</a></small>
</div>
</section>
</footer>
答案 0 :(得分：0)
您想要的不同方法是将页脚粘贴到页面底部。怎么样？
您可以简化并使用来自css的vh。 Browser support
使用calc()函数换行。 Browser support
你最终得到：calc(100vh - 161px)。由161px标题和页脚的高度组合而成。
将其应用于min-height中的.wrapper，并且他将始终拥有将页脚保持在底部所需的大小。
.wrapper {
min-height: calc(100vh - 161px);
height: auto !important;
}
.footer.panel-footer{
height:auto;
min-height: 101px;
background-color:#090909;
color:#9f9f9f;
border-radius:0;
font-size:12px;
}
.row.auto-height{
}
.main.container-fluid{
padding:0;
margin:0;
}
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6
{
font-family:fantasy;
}
aside.sidebar-panel h4{
border-bottom:1px dashed black;
}
header.navbar[role="navigation"]{
margin-bottom:0;
}
article header a {
color:inherit;
}
div.push-page{
height:5px;
}
aside{
background-color:hsl(220,70%,50%);
}
aside a{
color:white;
height:100%;
}
aside input.form-control[type="search"]:focus{
box-shadow:0px 0px 5px blue inset;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<!-- Begin Navbar -->
<header class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Class Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">-All-</a></li>
<li><a href="#">Period 1</a></li>
<li><a href="#">Period 2</a></li>
<li><a href="#">Period 3</a></li>
<li><a href="#">Period 5</a></li>
<li><a href="#">Period 6</a></li>
</ul>
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Log in</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</header>
<!-- End Header Nav -->
<!-- Main Section -->
<section class="container-fluid">
<section class="row auto-height">
<aside class="col-sm-3 col-xs-12 pull-right">
<h3>Sidebar</h3>
<ul class="nav nav-pills nav-stacked navbar-collapse">
<li>
<form action="#" method="get">
<div class="input-group">
<input type="search" name="s" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
</li>
<li><a href="#">Register</a></li>
</ul>
</aside>
<div class="push-page"></div>
<main class="col-sm-9">
<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might
say something like this:</p>
<blockquote>
<p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
</blockquote>
<p>…or something like this:</p>
<blockquote>
<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p>
</blockquote>
<p>As a new WordPress user, you should go to <a href="http://jhecht.dev/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
</main>
</section>
</section>
<!-- /main end main section -->
</div>
<!-- End wrapper div -->
<footer class="footer panel-footer">
<section class="container">
<div class="row">
<div class="col-md-4 col-xs-6 pull-right">
<h5 class="text-center hidden-xs">Contact Info <span class="fa fa-comments"></span></h5>
<h5 class="visible-xs">Contact Info <span class="fa fa-comments"></span></h5>
<dl class="dl-horizontal">
<dt>Phone</dt>
<dd><a href="tel:5102311423"><span class="glyphicon glyphicon-earphone"></span> (123) 456-7890</a></dd>
<dt>Email</dt>
<dd><a href="mailto:email@domain.com"><span class="glyphicon glyphicon-envelope"></span> email@domain.com</a></dd>
<dt>Facebook</dt>
<dd><a href="//facebook.com/link"><span class="fa fa-facebook-square"></span> FAcebook</a></dd>
<dt>Twitter</dt>
<dd><a href="//twitter.com/user"><span class="fa fa-twitter"></span> @Twitter</a></dd>
</dl>
</div>
<div class="col-md-2 col-xs-6">
<h5>Other Resources <span class="glyphicon glyphicon-folder-open"></span></h5>
<ul class="list-unstyled">
<li>Yeah, other resources</li>
</ul>
</div>
</div>
<div class="col-xs-12 text-center">
©
<br class="visible-xs"><small>Powered By <a href="//getbootstrap.com">Bootstrap</a>, <a href="//wordpress.com">Wordpress</a></small>
</div>
</section>
</footer>
答案 1 :(得分：0)
您可以将包装器背景更改为页脚颜色，然后应用部分颜色：
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom:100px;
background-color: #090909;
}
.wrapper section {
background-color: #fff;
}
.footer.panel-footer {
margin-top:-101px;
height:auto;
min-height: 101px;
background-color:#090909;
color:#9f9f9f;
border-radius:0;
font-size:12px;
}
您需要调整页脚边框，但这会填充页面上的任何空白区域。
答案 2 :(得分：0)
这是我发现的一种方式，它是你想要的吗？ http://codepen.io/anon/pen/mJvLrm
<div class="wrapper">
<!-- Begin Navbar -->
<header class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Class Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">-All-</a></li>
<li><a href="#">Period 1</a></li>
<li><a href="#">Period 2</a></li>
<li><a href="#">Period 3</a></li>
<li><a href="#">Period 5</a></li>
<li><a href="#">Period 6</a></li>
</ul>
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Log in</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</header>
<!-- End Header Nav -->
<!-- Main Section -->
<section class="container-fluid">
<section class="row auto-height">
<aside class="col-sm-3 col-xs-12 pull-right">
<h3>Sidebar</h3>
<ul class="nav nav-pills nav-stacked navbar-collapse">
<li>
<form action="#" method="get">
<div class="input-group">
<input type="search" name="s" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
</li>
<li><a href="#">Register</a></li>
</ul>
</aside>
<div class="push-page"></div>
<main class="col-sm-9">
<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might
say something like this:</p>
<blockquote>
<p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
</blockquote>
<p>…or something like this:</p>
<blockquote>
<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p>
</blockquote>
<p>As a new WordPress user, you should go to <a href="http://jhecht.dev/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
</main>
</section>
</section>
<!-- /main end main section -->
</div>
<!-- End wrapper div -->
<footer class="footer panel-footer">
<section class="container">
<div class="row">
<div class="col-md-4 col-xs-6 pull-right">
<h5 class="text-center hidden-xs">Contact Info <span class="fa fa-comments"></span></h5>
<h5 class="visible-xs">Contact Info <span class="fa fa-comments"></span></h5>
<dl class="dl-horizontal">
<dt>Phone</dt>
<dd><a href="tel:5102311423"><span class="glyphicon glyphicon-earphone"></span> (123) 456-7890</a></dd>
<dt>Email</dt>
<dd><a href="mailto:email@domain.com"><span class="glyphicon glyphicon-envelope"></span> email@domain.com</a></dd>
<dt>Facebook</dt>
<dd><a href="//facebook.com/link"><span class="fa fa-facebook-square"></span> FAcebook</a></dd>
<dt>Twitter</dt>
<dd><a href="//twitter.com/user"><span class="fa fa-twitter"></span> @Twitter</a></dd>
</dl>
</div>
<div class="col-md-2 col-xs-6">
<h5>Other Resources <span class="glyphicon glyphicon-folder-open"></span></h5>
<ul class="list-unstyled">
<li>Yeah, other resources</li>
</ul>
</div>
</div>
<div class="col-xs-12 text-center">
©
<br class="visible-xs"><small>Powered By <a href="//getbootstrap.com">Bootstrap</a>, <a href="//wordpress.com">Wordpress</a></small>
</div>
</section>
</footer>
和CSS
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom: 100px;
}
.footer.panel-footer {
margin-top: -101px;
height: auto;
min-height: 101px;
background-color: #090909;
color: #9f9f9f;
border-radius: 0;
font-size: 12px;
}
.row.auto-height {} .main.container-fluid {
padding: 0;
margin: 0;
}
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: fantasy;
}
aside.sidebar-panel h4 {
border-bottom: 1px dashed black;
}
header.navbar[role="navigation"] {
margin-bottom: 0;
}
article header a {
color: inherit;
}
div.push-page {
height: 5px;
}
aside {
background-color: hsl(220, 70%, 50%);
}
aside a {
color: white;
height: 100%;
}
aside input.form-control[type="search"]:focus {
box-shadow: 0px 0px 5px blue inset;
}