页脚低于内容，但不漂浮的空中，如果没有足够的内容 [英] Footer below content, but not floating mid-air if not enough content
问题描述
好的，
我得到这个代码：
DEMO： http://jsfiddle.net/z21nz89d/2/
html：
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>Some footer-content</p>
<p>Some footer-content</p>
<p>Some footer-content</p>
</div>
<div class="col-md-4">
<p>Some footer-content</p>
<p>Some footer-content</p>
</div>
</div>
</div>
</footer>
css：
footer {
background-color: #eee;
padding-top: 15px;
padding-left: 15px;
}
基本的我有，但你会得到的点。
正如你所看到的，脚注位于空中。
我可以把它设置为绝对的，并使其容易粘，但是出于各种原因，我不想这样。
It's kind of the very basic of what I have, but you'll get the point. As you can see the footer is positioned somewhere mid-air. I could position it absolute and make it sticky easily, but for various reasons I do not want that.
我想页脚是下面的整个内容（可以说，列为最后一个），但是，如果没有足够的内容，我需要将页脚放置在底部：0和左：0。
I want the footer to be BELOW the whole content (so to speak, listed as very last), however, if there's not enough content I need the footer to be placed at bottom: 0 and left: 0.
不知道如何完成这个。我的第一个猜测是使用JavaScript来查看有多少空间，以及该网站是否可滚动。
I have no idea how to accomplish this. My first guess would've been to use JavaScript to see how much space there is and whether the site is scrollable or not.
请帮助我。谢谢大家提前:)
有一个好日子！
Please help me. Thank you all in advance :) Have a good day!
推荐答案
这是我发现的最简单的方法做好脚注。除了你的页脚包装在一个包装div。然后将您的HTML和body高度设置为100％，在包装器上设置最小高度为100％。接下来，你需要给这个包装器一个底部边距和底部填充，这是与页脚相同的高度。
This is the easiest way I have found to make a good footer. Wrap everything but your footer in a "wrapper" div. Then set your html and body height to 100%, with a min-height of 100% on your wrapper. Next, you need to give a bottom margin and bottom padding to this wrapper that is the same height as your footer. It works like a charm.
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
footer {
height: 100px;
}
这篇关于页脚低于内容，但不漂浮的空中，如果没有足够的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
