Twitter Bootstrap - 使行占据剩余高度

问题描述：

在人们将此问题标记为重复之前，让我告诉大家我已经尝试了以前在SO中给出的所有建议，尤其是display: table。这不适用于Bootstrap。Twitter Bootstrap - 使行占据剩余高度

我想实现的是以下各项：

--------------------- 
|  Nav Bar  | 
|-------------------| 
|  |Body |  | 
|  |  |  | 
|______|_____|______| 
|  |  |  | 
|  |  |  | 
|______|_____|______|

导航栏必须在最前面。身体的其余部分必须有6个div，每个div占4列。

由于导航栏将根据调整大小进行更改，因此必须将身体部分的高度设置为剩余高度。

由于浏览器兼容，我避免使用flexbox解决方案。而且更喜欢唯一的CSS解决方案。

这是我using-代码：

任何后

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Admin</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <style> 
 
     html, 
 
     body { 
 
      height: 100%; 
 
      padding: 0px; 
 
      margin: 0px; 
 
     } 
 

 
     .first_wrapper { 
 
      padding: 0px; 
 
      margin: 0px; 
 
     } 
 

 
     .navbar { 
 
      margin: 0px; 
 
     } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid first_wrapper"> 
 
     <!-- Navbar start --> 
 
     <nav class="navbar navbar-default"> 
 
      <div class="container-fluid"> 
 
       <div class="navbar-header"> 
 
        <a class="navbar-brand" href="#">Admin Page</a> 
 
       </div> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#">Home</a></li> 
 
        <li><a href="#">Page 1</a></li> 
 
        <li><a href="#">Page 2</a></li> 
 
        <li><a href="#">Page 3</a></li> 
 
       </ul> 
 
      </div> 
 
     </nav> 
 
     <!-- Navbar end --> 
 
    </div> 
 
    <!-- Second Container --> 
 
    <div class="container-fluid" style="height:100%;width:100%;padding:0px;margin:0px;"> 
 
     <div class="row" style="height:100%;width:100%;padding:0px;margin:0px;"> 
 
      <div class="row" style="height:50%;width:100%;padding:0px;margin:0px;"> 
 
       <div class="col-lg-4" style="height:100%;background-color:red;"></div> 
 
       <div class="col-lg-4" style="height:100%;background-color:green;"></div> 
 
       <div class="col-lg-4" style="height:100%;background-color:pink;"></div> 
 
      </div> 
 
      <div class="row" style="height:50%;width:100%;padding:0px;margin:0px;"> 
 
       <div class="col-lg-4" style="height:100%;background-color:green;"></div> 
 
       <div class="col-lg-4" style="height:100%;background-color:red;"></div> 
 
       <div class="col-lg-4" style="height:100%;background-color:blue;"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

注释 “第二个容器” 需要动态地占领这个高地。

有JS的选择，如果你犯了一个的jsfiddle你更有可能得到帮助 –

@ Dejan.S的问题已经被编辑到 –

@ZimSystem采取的代码片段并运行它是你的浏览器。第二个容器不能溢出。它必须占用视口的剩余空间。没有滚动。 –

答

你在正确的轨道看着display:table上。但是，您还需要进一步加入行和单元格样式。通过使用display:table-row创建行并将container-fluid元素添加为display:table-cell，您可以让它们将需要的空间按需扩展而不会溢出。另一个技巧是通过将主体元素font-size和line-height设置为0来处理紧挨着body元素的display:inline-block元素，以对抗标签化html创建的空白区域，然后将这些值重置到inline-block元素中。 请注意，因为您使用的是col-lg-4，您需要将jsfiddle窗口变得足够宽，以便它们成为列。

display:inline-block臭名昭着的留下项目之间的“空白”。这是因为格式化代码之间的“空白”。有一个great article关于与评论，跳过结束标签或字体大小的这种做法。个人而言，字体大小更容易维护。

使用display:inline-block超过display:table包含元素的原因主要是由于Firefox的错误，其中display:table犯规正确渲染，你可以找到解决这里列出：CSS height 100% in firefox not working

JSFIDDLE

HTML

<div id="outerContainer"> 
    <div class="display-table"> 
     <div class="display-table-row" id="navigation"> 
      <div class="container-fluid first_wrapper display-table-cell"> 
       <!-- Navbar start --> 
       <nav class="navbar navbar-default"> 
        <div class="container-fluid"> 
         <div class="navbar-header"> 
          <a class="navbar-brand" href="#">Admin Page</a> 
         </div> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Home</a></li> 
          <li><a href="#">Page 1</a></li> 
          <li><a href="#">Page 2</a></li> 
          <li><a href="#">Page 3</a></li> 
         </ul> 
        </div> 
       </nav> 
       <!-- Navbar end --> 
      </div> 
     </div> 
     <div class="display-table-row"> 
      <div class="container-fluid display-table-cell"> 
       <div class="row"> 
        <div class="col-lg-4" style="background-color:red;"></div> 
        <div class="col-lg-4" style="background-color:green;"></div> 
        <div class="col-lg-4" style="background-color:pink;"></div> 
       </div> 
      </div> 
     </div> 
     <div class="display-table-row"> 
      <div class="container-fluid display-table-cell"> 
       <div class="row"> 
        <div class="col-lg-4" style="background-color:green;"></div> 
        <div class="col-lg-4" style="background-color:red;"></div> 
        <div class="col-lg-4" style="background-color:blue;"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

html, 
body { 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    font-size:0; 
    line-height:0; 
} 

.first_wrapper { 
    padding: 0px; 
    margin: 0px; 
} 

.navbar { 
    margin: 0px; 
} 

#outerContainer{ 
    display: inline-block; 
    height:100%; 
    width:100%; 
    font-size:14px; 
    line-height:1.42857143; 
} 
.display-table{ 
    display:table; 
    height:100%; 
    width:100%; 
} 
.display-table-row{ 
    display:table-row; 
    width:100%; 
    height:50%; 
} 
.display-table-cell{ 
    display:table-cell; 
    width:100%; 
} 
.display-table-cell > .row{ 
    height:100%; 
} 
.display-table-cell > .row > [class*="col-"]{ 
    height:100%; 
} 
#navigation.display-table-row{ 
    height:auto; 
}

这会导致水平滚动条。 – ZimSystem

@ZimSystem，您在哪个浏览器/分辨率下看到滚动条？在1200+宽的OSX Chrome上没有出现过这种情况 – haxxxton

@haxxxton这是一个很好的答案，但请原谅我让你更加困扰。你能否说明为什么你做了一个'display：inline-block'？并且还将'line-height：0'和'font-size：0;'合理化。如果你可以编辑你的答案，以更详细地解释这一点，那将是非常棒的。 –

答

你想要这样吗？

你必须把这个CDN

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

那朵是完整的脚本

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Admin</title> 
 
    <!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 
     html, 
 
     body { 
 
      height: 100%; 
 
      padding: 0px; 
 
      margin: 0px; 
 
     } 
 

 
     .first_wrapper { 
 
      padding: 0px; 
 
      margin: 0px; 
 
     } 
 

 
     .navbar { 
 
      margin: 0px; 
 
     } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid first_wrapper"> 
 
     <!-- Navbar start --> 
 
     <nav class="navbar navbar-default"> 
 
      <div class="container-fluid"> 
 
       <div class="navbar-header"> 
 
        <a class="navbar-brand" href="#">Admin Page</a> 
 
       </div> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#">Home</a></li> 
 
        <li><a href="#">Page 1</a></li> 
 
        <li><a href="#">Page 2</a></li> 
 
        <li><a href="#">Page 3</a></li> 
 
       </ul> 
 
      </div> 
 
     </nav> 
 
     <!-- Navbar end --> 
 
    </div> 
 
    <!-- Second Container --> 
 
    <div class="container-fluid" style="height:100%;width:100%;padding:0px;margin:0px;"> 
 
     <div class="row" style="height:100%;width:100%;padding:0px;margin:0px;"> 
 
      <div class="row" style="height:50%;width:100%;padding:0px;margin:0px;"> 
 
       <div class="col-lg-4" style="height:100%;background-color:red;"></div> 
 
       <div class="col-lg-4" style="height:100%;background-color:green;"></div> 
 
       <div class="col-lg-4" style="height:100%;background-color:pink;"></div> 
 
      </div> 
 
      <div class="row" style="height:50%;width:100%;padding:0px;margin:0px;"> 
 
       <div class="col-lg-4" style="height:100%;background-color:green;"></div> 
 
       <div class="col-lg-4" style="height:100%;background-color:red;"></div> 
 
       <div class="col-lg-4" style="height:100%;background-color:blue;"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Yousuf请分享您的完整代码片段吗？ –

我可以，看看下一个ans。 –

@NiranYousuf不，这不是如何回答的作品。如果*这个*答案没有完成，那么**编辑它**，不要发布另一个无效的答案。 – Ajean

答

您可以使用CSS calc作为容器高度减去导航栏高度。

<div class="container-fluid first_wrapper"> 
    <!-- Navbar start --> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">Admin Page</a> 
      </div> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Page 1</a></li> 
       <li><a href="#">Page 2</a></li> 
       <li><a href="#">Page 3</a></li> 
      </ul> 
     </div> 
    </nav> 
    <!-- Navbar end --> 
</div> 
<!-- Second Container --> 
<div class="container-fluid full"> 

     <div class="row half"> 
      <div class="col-lg-4" style="background-color:red;"></div> 
      <div class="col-lg-4" style="background-color:green;"></div> 
      <div class="col-lg-4" style="background-color:pink;"></div> 
     </div> 
     <div class="row half"> 
      <div class="col-lg-4" style="background-color:green;"></div> 
      <div class="col-lg-4" style="background-color:red;"></div> 
      <div class="col-lg-4" style="background-color:blue;"></div> 
     </div> 

</div>

CSS：

.full { 
    height: calc(100% - 52px); 
} 

.half { 
    height: 50%; 
} 

.half > .col-lg-4 { 
    height: 100%; 
}

http://www.codeply.com/go/mkOL2syp5O

这很大程度上依赖于知道导航栏的大小和/或希望它不会在不同的屏幕分辨率下更改大小，但在您的答案中可能是警告？ – haxxxton

导航栏的高度不会改变，直到列垂直堆叠，所以它真的没关系。 – ZimSystem

Twitter Bootstrap - 使行占据剩余高度

相关推荐