Question

我有一个带两列的引导程序布局。在更高的屏幕上，1000px内容块不会拉伸到页脚。我需要它根据用户浏览器窗口的高度垂直扩展。我试过身高：100％，最小身高：100％;等等请参阅下面的代码。

<div id="wrapContent" class="wrapContent">
  <div class="container">
    <div class="row">
      <header>
        HEADER
      </header>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div id="content" class="content clearfix">
        <div class="col-xs-12">
          <div class="flex-container">
            <div class="col-xs-8 leftBlock">
              LEFT BLOCK
            </div>
            <div class="col-xs-4 rightBlock">
              RIGHT BLOCK
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <footer>
      FOOTER
    </footer>
  </div>
</div>

html,body {
 height: 100%;
 min-height: 100%;
 font-size: 1.2em;
} 

.wrapContent {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
  margin: 0 auto -71px;
  padding-bottom: 70px;
  background: #323742;
}

.container {
  width: 1170px !important;
  margin: 0 auto;
}

header {
  overflow: visible;
  height: 189px;
  background: #222;
  color: #fff;
}

.content {
  min-height: 516px;
}

.flex-container {
  min-height: 516px;
  overflow: hidden;
  margin-right: -15px;
  margin-left: -15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.leftBlock {
  background: #fff;
}

.rightBlock {
  background: #ccc;
}

footer {
  background: #222;
  height: 71px;
  color: #fff;
}

Answer 1

.div{
    height: 100vh;
}

将这些行添加到您想要拉伸的任何容器中，它应该可以工作。我已经尝试过了:)

在你的情况下：

.leftBlock, .rightBlock{
  height: 100vh;
}

Answer 2

试试这段代码，我想这就是你想要的。我为你写了一个完整的代码。

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }
 .Header{
    background-color: gray;
    color: white;
    height: 189px;
    font-size: 25px;
 }
.Bone{
  background-color: orange;
  color: white;
  height: 400px;
  color: white;
}

.Btwo{
  background-color: red;
  color: white;
  height: 400px;
  color: white;
}
.Footer{
    background-color: black;
    color: white;
    height: 70px;
    font-size: 25px;
}
</style>
<body>

<div class="container">
 <div class="table-responsive">
   <table class="table">
     <thead>
       <tr><div class="col-md-12 Header">Header</div></tr>
     </thead>
     <tbody>
       <tr>
         <div class="col-md-8 Bone">Left Block</div>
         <div class="col-md-4 Btwo">Right Block</div>
       </tr>
     </tbody>
     <tfoot>
       <tr><div class="col-md-12 Footer">Footer</div></tr>
     </tfoot>
   </table>
 </div>
  
</div>

</body>
</html>

只需复制，粘贴并运行它。如果情况并非如此，请告诉我。

Answer 3

感谢大家！我刚刚写了简单的JS，而且每件事都可以正常使用

  function rightBlockHeight() {
    var height = $( window ).height() - $( '#footer' ).height() - $( "#header" ).height();
    $( '#content' ).css( 'min-height', height );
    $( '.rightBlock' ).css( 'min-height', height );
  }
  $( document ).ready( function() {
    rightBlockHeight();
  } );
  $( window ).resize( function() {
    rightBlockHeight();
  } );

如何使列在不同的屏幕中伸展到页脚？

3 个答案: