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

Question

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

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

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

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

我正在使用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>