Question

这就是我想要实现的目标。

enter image description here

我的HTML目前看起来像：

<body>
 <header>
 ... // BS sticky navbar - always visible no matter what
 </header>
 <main>
   <div class="container">
     <div class="row">
     </div>
   </div>
 </main>
 <footer>
   .. // Footer at bottom but content can push it down
 </footer>

.container或.row可以是白色div。当内容不足时，它需要触摸页脚。

main div必须保持100％的宽度。

解决方案必须仅限CSS，并且可以在IE10 + /现代浏览器中使用。 IE9会很棒但不是必需的，只要替代方案看起来不像废话（即文本中间的页脚）。

我尝试了很多解决方案，例如：

- http://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/
- http://www.fredonism.com/archive/min-height-100-percent-and-sticky-footer.aspx

不幸的是，我找不到任何作品。我看到的大多数解决方案都不涉及内部白色div，只使用main。例如，上面链接的第二个解决方案将main div缩小为白色，这在我的情况下不起作用。当内容较大时，100vh之类的内容似乎效果不佳 - 我最终会在页面中间滚动页脚。

Answer 1

浏览器支持：IE9 + /现代浏览器。

JSFiddle - http://jsfiddle.net/z1ts4rro/

html {
    position: relative;
    min-height: 100%;
}
body {
    background: lightgoldenrodyellow;
    margin: 50px 0;
}
header, footer {
    background: lightseagreen;
    width: 100%;
    height: 50px;
}
header {
    position: fixed;
    left: 0;
    top: 0;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
}
.container {
    width: 70%;
    margin: 0 auto;
    background: white;
    min-height: calc(100vh - 100px);
}

<header>header</header>
<main>
    <div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor, augue a vehicula pretium, arcu lorem interdum ligula, sed vehicula purus turpis et velit. Praesent rhoncus venenatis malesuada. Proin sem felis, vulputate eu tincidunt ac, dictum nec tellus. Aliquam a ex bibendum, porttitor ipsum id, varius leo. Aliquam ornare suscipit justo vel rhoncus. Integer sit amet risus nec lectus fermentum egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl neque, aliquam in tincidunt vel, vehicula suscipit neque. Quisque faucibus gravida lectus. Ut porttitor tincidunt elementum. Sed urna erat, pellentesque sit amet commodo vestibulum, eleifend ac diam.</div>
</main>
<footer>footer</footer>

Answer 2

好吧，我能够把事情变成令人愉快的事情。我会在这里发布，以防其他人使用。诀窍是将main:after属性集用于绝对定位，其颜色与容器div相同。

请注意，我正在使用BS标头，因此从代码中省略了它。只需使用标准BS粘性导航。

html {
  height: 100%;
  position: relative;
}

body {
  position: relative;
  min-height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}


main {
   position: relative;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: red;

  &:after {
    position: absolute;
    content: '';
    width: 1170px;
    display: block;
    left: 50%;
    margin-left: -585px;
    top: 0;
    bottom: 0;
    background-color: white;
  }
  .container {
    z-index: 1000;
    background-color: white;
    position: relative;
   .row {
      position: relative;      
    }
  }
}

footer {
  z-index: 1000;
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #000; 
}

如何在Bootstrap 3中制作100％高度的容器

2 个答案: