首页 前端开发 页脚低于内容，但如果内容不足，则不会漂浮在空中
页脚低于内容，但如果内容不足，则不会漂浮在空中
[英] Footer below content, but not floating mid-air if not enough content
本文介绍了页脚低于内容，但如果内容不足，则不会漂浮在空中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我得到了这个代码:
演示:http://jsfiddle.net/z21nz89d/2/
HTML:
<div class="container-fluid"><!-- 品牌和切换被分组以获得更好的移动显示--><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Brand</a> <!-- 收集导航链接、表单和其他用于切换的内容--><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="#">链接</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li><li class="divider"></li><li><a href="#">一个单独的链接</a></li><form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">提交</button></表单><ul class="nav navbar-nav navbar-right"><li><a href="#">链接</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li></div><!--/.navbar-collapse --></div><!--/.container-fluid --></nav><div class="容器"><p>这里有一些内容.</p><p>这里有一些内容.</p><p>这里有一些内容.</p><p>这里有一些内容.</p><p>这里有一些内容.</p>
<页脚><div class="容器"><div class="row"><div class="col-md-8"><p>一些页脚内容</p><p>一些页脚内容</p><p>一些页脚内容</p>
<div class="col-md-4"><p>一些页脚内容</p><p>一些页脚内容</p>
</页脚>
CSS:
页脚{背景色:#eee;填充顶部:15px；左边距:15px；}这是我所拥有的非常基础的东西，但你会明白这一点.如您所见，页脚位于半空中的某个位置.我可以把它绝对定位，让它很容易变粘，但出于各种原因，我不想要那样.
我希望页脚低于整个内容(可以这么说，列为最后)，但是，如果没有足够的内容，我需要将页脚放在底部:0 和左侧:0.
我不知道如何做到这一点.我的第一个猜测是使用 JavaScript 来查看有多少空间以及网站是否可滚动.
解决方案
这是我发现的制作好的页脚的最简单方法.将除页脚之外的所有内容都包装在包装器"div 中.然后将您的 html 和正文高度设置为 100%，包装上的最小高度为 100%.接下来，您需要为此包装器提供与页脚相同高度的底部边距和底部填充.它就像一个魅力.
此处演示
html, body {高度:100%；}.包装{最小高度:100%；底边距:-100px；填充底部:100px；}页脚{高度:100px；}
I got this code:
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.
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.
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.
解决方案
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.
Demo here
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
footer {
height: 100px;
}
这篇关于页脚低于内容，但如果内容不足，则不会漂浮在空中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
