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

Question

我正在为应用创建管理仪表板,我需要这样的布局:

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

宽度和高度应为整个视口的100%.我试图通过使用固定在顶部导航栏中,做到这一点.navbar-fixed-top,position: absolute对于侧边导航和固定高度使用不同的屏幕大小媒体查询主,副意见.但我正在寻找更好,更清洁的解决方案.我该怎么做？

Answer 1

这是一个完成你想要的相当简单的方法.媒体查询允许导航视图,主视图和子视图的高度转到自动,假设您要为xs视口折叠.

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>