【发布时间】：2018-07-29 18:02:02
【问题描述】：
我正在尝试围绕我的网站内容构建一个新的引导“框架”模板。 使用导航栏我没有问题......但是页脚有一些问题。
页脚应为：
- 粘性
- 有 2 行
- 一个带有 4 列响应内容的胖灰色
- 在浏览器内容框架的最底部结束的黑色细线
到目前为止我有什么：
sticky-footer.css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 550px;
}
.footer {
background: black;
position: absolute;
bottom: 0;
width: 100%;
}
#contentFooter {
margin: 0px;
width: 100%;
background: dimgray;
padding: 50px 0 40px;
margin-bottom: 30px;
color: #939fa6;
}
#copyrightFooter {
color: black;
line-height: 30px;
}
#backToTopLink::before {
display: block;
content: "";
width: 15px;
height: 15px;
border-left: 1px solid #93959d;
border-top: 1px solid #93959d;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 13px;
margin-left: -9px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ACME Inc.</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="sticky-footer.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://via.placeholder.com/200x70"></a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Bar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Qux</a>
</li>
</ul>
</div>
</div>
</header>
<div class="container">
<div class="mt-1">
<h1>ACME Inc. presents</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<footer class="footer">
<div id="contentFooter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h6>ACME Inc.</h6>
</div>
<div class="col-md-3">
<h6>How to reach us</h6>
<ul>
<li>foobar@acme.inc</li>
<li>+1 234 567 890</li>
<li>Earth, Milkyway</li>
</ul>
</div>
<div class="col-md-3">
<h6>General</h6>
<ul>
<li>Imprint</li>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
<div class="col-md-3">
<h6>Sponsored by</h6>
<img style="max-width: 100%; height: auto; width: auto; vertical-align: middle;" src="http://via.placeholder.com/350x100">
</div>
</div>
</div>
</div>
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-md-6">
<a href="#" id="backToTopLink"></a>
</div>
</div>
</div>
</footer>
</body>
</html>
这确实有效，但我还有 3 个问题（另见图片）：
- 当浏览器图像太窄以至于响应式风格开始出现时，我突然在页脚的黑色部分下方出现了一条白色条纹。我希望黑色部分继续向下到浏览器窗口的绝对底部。
- 我希望在响应式变窄开始后，页脚黑色部分中的
ACME Inc.立即居中。 - 我需要定义
body { margin-bottom: 550px; }，否则页脚会“吃掉”部分内容。问题是......有什么方法可以“动态地”实现这一点，所以我不需要重新计算近似的页脚高度并在bodyCSS 规则中刷新它？
Screenshot of problems from problem list
我无法使用堆栈溢出编辑器创建可运行的代码示例（找不到按钮：https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/），所以我创建了一个 jsfiddle：
【问题讨论】：
标签： html css twitter-bootstrap footer sticky