div 高度 100%，带页眉和页脚 - 没有技巧

Question

我正在尝试创建一个布局，其中我有一个以 px 为单位的固定高度的页眉 (nav)，一个固定 px 的页脚以及它们之间的 div 占据剩余的 space.

损坏的演示：http://jsfiddle.net/murid/0vcyqm3y/

我想要实现的是让蓝色 div 一直到页脚。请记住，我正在使用 "push" div 让页脚位于页面底部，以防页面内容很短并且所述内容也可能很长因此将页脚向下推。

我在 Whosebug 上查看了类似的问题，但答案涉及绝对位置、JavaScript 或正文的背景颜色，我试图避免所有这些问题并有一个简单的 CSS 仅在内容 div.

上使用背景颜色的解决方案

我正在使用 Bootstrap 顺便说一句。

CSS 和 HTML:

    html,
    body {
      height: 100%;
    }
    
    #wrap {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin-bottom: -50px;
    }
    
    nav.navbar {
     margin-bottom: 0;
    }
    
    section {
     padding: 10px 0;
     margin-left: -15px;
     margin-right: -15px;
    }
    
    .section-primary {
     background: #337ab7;
    }
    
    section > .row {
     margin-left: 0;
     margin-right: 0;
    }
    
    footer,
    .push {
     height: 50px;
    }

    <div id="wrap">
    
     <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container-fluid">
       <div class="navbar-header">
        <button type="button" class="navbar-toggle" 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="">Logo</a>
       </div>
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
         <li>
          <a href="">Logout</a>
         </li>
        </ul>
       </div>
      </div>
     </nav>
    
     <div class="container-fluid">
      <section class="section-md section-primary">
       <div class="row">
        <div class="col-sm-12">
         <div class="row">
          <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
           <div class="panel panel-default">
            <div class="panel-body">
             Panel Body
            </div>
           </div>
          </div>
         </div>
        </div>
       </div>
      </section>
     </div>
    
     <div class="push"></div>
    
    </div>
    
    <footer>
     <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container-fluid">
       <div class="navbar-header">
        <a class="navbar-brand" href="">Copyright</a>
       </div>
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
         <li>
          <a href="">Logout</a>
         </li>
        </ul>
       </div>
      </div>
     </nav>
    </footer>

Answer 1

我不得不说我不喜欢这个..但这是我知道的唯一 CSS 解决方案..

http://codepen.io/pacMakaveli/pen/EjWXNw?editors=110

否则，为了更简洁，请使用 flexbox。

html,
body {
  height: 100%;
}

#wrap {
 height: 100%;
  display: table;
  width: 100%;
  border: 2px solid green;
}

#wrap > nav,
footer {
  display: table-row;
}

nav.navbar {
 margin-bottom: 0;
}

section {
 padding: 10px 0;
 margin-left: -15px;
 margin-right: -15px;
}

.section-primary {
 background: #337ab7;
}

.content {
  border: 3px solid red;
  display: table-cell;
  height: 100%;
}

section > .row {
 margin-left: 0;
 margin-right: 0;
}

<div id="wrap">

  <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" 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="">Logo</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="content">
    <div class="container-fluid">
      <section class="section-md section-primary">
        <div class="row">
          <div class="col-sm-12">
            <div class="row">
              <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                  <div class="panel-body">
                    Panel Body
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>

  <footer>
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="">Copyright</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="">Logout</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </footer>
</div>

div 高度 100%，带页眉和页脚 - 没有技巧

div height 100% with header and footer - no tricks

html

css

height

twitter-bootstrap