div高度100％的页眉和页脚 - 没有技巧

Question

我想创建一个布局，我有一个固定的高度在px中的页眉（nav），一个固定的px页脚以及它们之间的div占据剩余的空间。

破碎演示：http://jsfiddle.net/murid/0vcyqm3y/

我试图做到的，是为蓝格走一路下跌到页脚。请记住，我正在使用“推”div来让页脚位于页面的底部，以防页面内容很短，并且所述内容可能会很长，因此会推下页脚。

我已经签出了类似的问题在Stackoverflow，但答案涉及位置绝对，JavaScript或背景颜色的身体，我试图避免所有这些，并有一个简单的CSS与内容的背景颜色的解决方案DIV。

我使用的是Bootstrap btw。

CSS和HTML：

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

<div id="wrap"> 
 
    
 
    \t <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
    \t \t <div class="container-fluid"> 
 
    \t \t \t <div class="navbar-header"> 
 
    \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
    \t \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
    \t \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t \t </button> 
 
    \t \t \t \t <a class="navbar-brand" href="">Logo</a> 
 
    \t \t \t </div> 
 
    \t \t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
    \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
    \t \t \t \t \t <li> 
 
    \t \t \t \t \t \t <a href="">Logout</a> 
 
    \t \t \t \t \t </li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </nav> 
 
    
 
    \t <div class="container-fluid"> 
 
    \t \t <section class="section-md section-primary"> 
 
    \t \t \t <div class="row"> 
 
    \t \t \t \t <div class="col-sm-12"> 
 
    \t \t \t \t \t <div class="row"> 
 
    \t \t \t \t \t \t <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> 
 
    \t \t \t \t \t \t \t <div class="panel panel-default"> 
 
    \t \t \t \t \t \t \t \t <div class="panel-body"> 
 
    \t \t \t \t \t \t \t \t \t Panel Body 
 
    \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t </section> 
 
    \t </div> 
 
    
 
    \t <div class="push"></div> 
 
    
 
    </div> 
 
    
 
    <footer> 
 
    \t <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
    \t \t <div class="container-fluid"> 
 
    \t \t \t <div class="navbar-header"> 
 
    \t \t \t \t <a class="navbar-brand" href="">Copyright</a> 
 
    \t \t \t </div> 
 
    \t \t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
    \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
    \t \t \t \t \t <li> 
 
    \t \t \t \t \t \t <a href="">Logout</a> 
 
    \t \t \t \t \t </li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </nav> 
 
    </footer>

Answer 1

我不得不说我不是这个迷..但是这是唯一的解决办法CSS我知道..

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

否则，为了更干净的方式，请使用flexbox。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

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

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

 
nav.navbar { 
 
\t margin-bottom: 0; 
 
} 
 

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

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

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

 
section > .row { 
 
\t margin-left: 0; 
 
\t 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>