html - Bootstrap 3 中的 3 列全屏应用程序布局

Question

我正在为一个应用程序创建一个管理仪表板，我需要这样的布局:

---------------------------------------------------------------------------------
|                                                                               |
|                              NAVBAR                                           |
---------------------------------------------------------------------------------
|        |                                                  |                   |
|   N    |                                                  |                   |
|   A    |                                                  |                   |
|   V    |                                                  |                   |
|   I    |                                                  |                   |
|   G    |                                                  |                   |
|   A    |                                                  |                   |
|   T    |                      MAIN VIEW                   |       SUB         |
|   I    |                                                  |       VIEW        |
|   O    |                                                  |                   |
|   N    |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
---------------------------------------------------------------------------------

宽度和高度应为整个视口(viewport)的 100%。我尝试通过使用 .navbar-fixed-top 修复顶部导航栏，为侧边导航使用 position: absolute 并使用修复主视图和 subview 的高度来做到这一点针对不同屏幕尺寸的媒体查询。但我正在寻找更好、更清洁的解决方案。我该怎么做？

Answer 1

这里有一个相当简单的方法来完成您想要的。假设您想为 xs 视口(viewport)折叠，媒体查询允许导航、主视图和 subview 的高度变为自动。

DEMO

CSS:

html, body {
   height: 100%; 
}
.container-fluid.content {
    padding-top: 50px;
    height: 100%;
}
.container-fluid.content>.row {
    height: 100%;
}    
.mainview, .navview, .subview {
    height: 100%;
    overflow: auto;        
}
.navview, .subview {
    background-color: #eee;        
}         

@media (max-width: 767px) {
    .mainview, .navview, .subview {
      height: auto;   
    }
}

基本 HTML 结构:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#">Navbar</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</div>
<div class="container-fluid content">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-sm-2 navview">
      <h2>Navigation</h2>
    </div>
    <div class="col-sm-7 mainview">
      <h2>Main View</h2>
    </div>
    <div class="col-sm-3 subview">
      <h2>Sub View</h2>
    </div>
  </div>
</div>