使用两行的粘性页脚创建响应式 Bootstrap 样式

Question

我正在尝试围绕我的网站内容构建一个新的 bootstrap "frame" 模板。使用导航栏我没有问题...但是页脚有一些问题。

页脚应为：

粘
有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 个问题（另请参见图片）：

当浏览器图像太窄以至于响应式样式开始出现时，我突然在页脚的黑色部分下方出现了一条白色条纹。我希望黑色部分继续向下到浏览器的绝对底部 window.
我希望页脚黑色部分的 ACME Inc. 在响应式缩小开始后立即居中。
我需要定义 body { margin-bottom: 550px; } 否则页脚将 "eat" 部分内容。问题是...有什么方法可以使这个 "dynamically" 所以我不需要重新计算近似的页脚高度并在 body CSS 规则中刷新它？

Screenshot of problems from problem list

我无法使用堆栈溢出编辑器创建可运行的代码示例（找不到按钮：https://Whosebug.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/），所以我创建了一个 jsfiddle：

https://jsfiddle.net/8hb4d5t8/1/

Answer 1

When the browser image is so narrow that the responsive style kicks in, i suddenly have a white stripe below the black part of the footer. I would like the black part to continue down to the absolute bottom of the browser window.

也为较小的视口定义列。不同的 windows 大小有不同的列定义。所以你的 div 应该是这样的：

<div class="container" id="copyrightFooter">
    <div class="row">
      <div class="col-3 col-md-3">
        <small class="text-muted">ACME Inc.</small>
      </div>
      <div class="col-6 col-md-6">
        <a href="#" id="backToTopLink"></a>
      </div>
    </div>
  </div>

这将使您的 div 具有与大屏幕上相同的相对宽度，如果您希望它们占据一整行，只需将其设置为：

<div class="col-12 col-md-3"></div>

I would like the ACME Inc. in the black part of the footer to be centered as soon as the responsive narrowing kicks in.

您可以实施 css，它只会影响特定的屏幕宽度。这是使用媒体查询完成的。

所以如果你想让它在小屏幕上居中，你可以做类似

@media screen and (max-width: 992px)
{
   .some-css-class{
      text-align: center;
   }
}

这只会影响视口宽度 <= 992px 的屏幕。

第三个问题也是如此：

I need to define body { margin-bottom: 550px; } or otherwise the footer will "eat" some part of the content. The thing is... is there some way to make this "dynamically" so i don't need to recalculate the approximate footer height and refresh it in the body CSS rule?

您可以使用针对不同视口宽度的媒体查询为 body 元素定义某些边距或填充。

This is your updated fiddle to this question.

使用两行的粘性页脚创建响应式 Bootstrap 样式

Create responsive Bootstrap style with sticky-footer with with two rows

html

css

sticky

footer

twitter-bootstrap