Question

即使内容框为空，我也需要内容框才能到达页脚。我想只使用CSS来实现这一点。

padding-bottom不是一个选项。
我不想使用背景图片，例如background-image: url center repeat-y;

我怎样才能做到这一点？

＆＃13;

.wrap {
  height: 100%;
}
.l-col {
  padding-top: 0;
  height: 100%;
}
.footer {
  position: relative;
  height: 60px;
  clear: both;
  float: left;
  width: 100%;
  z-index: 3;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
  <div class="container">
    <div class="col-xs-12 l-col">
      <div class="col-xs-12" style="padding:0px">
        <table>Content</table>
      </div>
    </div>
  </div>
</div>

＆＃13;

当前布局：

所需的布局：

Answer 1

使用CSS＆＃39; calc()功能，您可以使用计算内容div的最小高度。

＆＃13;

body {
  margin: 0
}

.header,
.footer {
  width: 100%;
  height: 60px;
  background-color: grey;
}

.content {
  width: 100%;
  min-height: calc(100vh - 120px);
  background-color: #FFF8DC;
}

＆＃13;

<div class="wrap">
  <div class="container">
    <div class="header">
      Header
    </div>

    <div class="content">
      Content
    </div>

    <div class="footer">
      Footer
    </div>
  </div>
</div>

＆＃13;

如果您的首选方法是jQuery，则以下代码将起作用，即使在页面调整大小时也是如此。

function setContentHeight() {
  var headerHeight = $(".header").height();
  var footerHeight = $(".footer").height();
  var winHeight = $(window).height();
  $(".content").css("min-height", winHeight-(headerHeight+footerHeight));
}

setContentHeight();
$(window).resize(setContentHeight);

Answer 2

在这里你只需计算你的最小高度，所以如果内容越来越多，如果你不想要只使用常规高度，它会扩展。

＆＃13;

body{margin:0;}
.head, .foot {
  width: 100%;
  background: gray;
  height: 50px;
  float: left;
  display: inline-block;
  }
.content {
  width: 80%;
  min-height: calc(100vh - 100px);
  background: lightgray;
  float: left;
  display: inline-block;
  }

＆＃13;

<div class="head">Head</div>
  <div class="content">hello</div>
    <div class="foot">foot</div>

＆＃13;

Answer 3

flex + html5，看起来像一个学校的案例......

html {
  display:flex;
  height:100%;
}
body {
  flex:1;
  display:flex;
  flex-flow:column;
  color:white;
}

header , footer{
  text-align:center;
  background:#4F81BD;
  line-height:4em;
}
main {
  flex:1;
  display:flex;
  justify-content:center;
  padding-left:10%;/* cause aside is set to 10% width */
}
section {
  border:30px #4F81BD solid;
  padding:1em;
  margin:2px;
  box-shadow:0 0 0 2px , inset 0 0 0 2px ;
  width:60%;/* whatever */
  color:  #385D8A
}
aside {
  background: #4F81BD ;
  box-shadow:0 0 0 2px #385D8A;
  margin:auto 0;
  width:10%;
  min-height:30vh;/* demo purpose, use content instead */
  display:flex;/* optionnal to center on XY axis */
  align-items:center;
  justify-content:center;
}

<header>
  header (any height)
</header>
<main><!-- fill gap in between -->
  <section>section, run snippet in full page mode and resize window</section>
  <aside>aside</aside>
</main>
<footer>
  footer  (any height)
</footer>

使用笔：http://codepen.io/gc-nomade/pen/ORyXZA

即使空的内容框也应扩展到页脚

当前布局：

所需的布局：

3 个答案: