可變尺寸中排的全高3排側欄

這個小提琴：https://jsfiddle.net/j1tuw3vj/43/已經接近我想要實現的目標，但我希望中間的可滾動部分（.scrollable）可以展開以填充可用空間 - - 沒有事情是在頂部和底部的「搜索欄」佔位符是什麼內容，也不管用戶的窗口是什麼高度。即底部的搜索欄應該與底部齊平。在Bootstrap上下文中實現此目的的最佳方式是什麼？可變尺寸中排的全高3排側欄

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 

 
/* Main view, move content down due to fixed navbar. */ 
 

 
.main-wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    padding-top: 50px; 
 
} 
 

 

 
/* Container for a sidebar. */ 
 

 
.sidebar-container { 
 
    height: 100%; 
 
    position: fixed; 
 
    padding: 0px; 
 
    margin-top: -50px; 
 
    padding-top: 50px; 
 
    border-right: 1px solid #ddd; 
 
} 
 

 
.sidebar-header, 
 
.sidebar-footer { 
 
    position: relative; 
 
    padding: 15px; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 

 
/* Scrollable sidebar. */ 
 

 
.sidebar { 
 
    height: 20%; 
 
    position: relative; 
 
    overflow-y: scroll; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
.main-view { 
 
    height: 100%; 
 
    overflow: auto; 
 
    position: relative; 
 
    padding: 0px; 
 
} 
 

 
.nav-pills li:last-child { 
 
    margin-bottom: 80px; 
 
}

<body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 

 
    </div> 
 
    </nav> 
 

 
    <div class="main-wrapper"> 
 
    <div class="sidebar-container col-xs-3"> 
 
     <div class="sidebar-header"> 
 
     <form class="form-inline"> 
 
      <input type="text" name="search" class="form-control" placeholder="Search" /> 
 
     </form> 
 
     </div> 
 
     <div class="sidebar"> 
 
     <nav> 
 
      <ul class="nav nav-stacked nav-pills"> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test1</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test2</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test3</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test4</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test5</h1> 
 
      </li> 
 
      <li> 
 
       <h1>Test6</h1> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 
     <div class="sidebar-footer"> 
 
     <form class="form-inline"> 
 
      <input type="text" name="search" class="form-control" placeholder="Search" /> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    <div class="main-view col-xs-9 pull-right"> 
 
     <div class="jumbotron text-center"> 
 
     <div class="container"> 
 
      <h2>Title</h2> 
 
      <p>Example <span class="text-danger">Text</span>.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-04-10 Kev

是不是真的是這個特定的引導方法。我認爲最好的辦法是讓側邊欄Flexbox的列。

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

/* Container for a sidebar. */ 
.sidebar-container { 
    height: 100%; 
    position: fixed; 
    padding: 0px; 
    margin-top: -50px; 
    padding-top: 50px; 
    border-right: 1px solid #ddd; 
    display: flex; 
    flex-direction: column; 
} 

/* Scrollable sidebar. */ 
.sidebar { 
    flex-grow: 1; 
    position: relative; 
    overflow-y: scroll; 
    border-bottom: 1px solid #ddd; 
}

來源

2017-04-10 11:37:16 ZimSystem

你可以使用CSS calc屬性欄的高度：

.sidebar { 
height: calc(100% - 130px); 
}

jsfiddle

哪裏130px是底部搜索框的高度。

來源

2017-04-10 11:34:57 sol

這有一個非常有趣的副作用，無論在什麼樣的底行的像素高度 - 即使它是不正確 - 這看起來還是如何，我們希望它。 – Kev

你可以使用display:flex實現這一目標。所以，你的CSS將變爲：

.sidebar-container { 
    display:flex; 
    flex-flow:column; 
    height: 100%; 
    position: fixed; 
    padding: 0px; 
    margin-top: -50px; 
    padding-top: 50px; 
    border-right: 1px solid #ddd; 

} 

.sidebar { 
    display:flex; 
    position: relative; 
    overflow-y: scroll; 
    border-bottom: 1px solid #ddd; 
}

工作小提琴這裏：https://jsfiddle.net/gurtejsingh/j1tuw3vj/44/

希望這有助於。乾杯。

來源

2017-04-10 11:38:03

試着改變你的CSS包括以下 - 它在可視窗口的底部位置的第二滾動然後離開滾動部根據剩餘的可視窗口的高度來計算其高度：

.sidebar-header { 
    position: relative; 
    padding: 15px; 
    border-bottom: 1px solid #ddd; 
    height = 100px; 
} 

.sidebar-footer { 
    position: fixed; 
    bottom: 0; 
    padding: 15px; 
    border-bottom: 1px solid #ddd; 
    height = 100px; 
} 

/* Scrollable sidebar. */ 
.sidebar { 
    position: relative; 
    overflow-y: scroll; 
    border-bottom: 1px solid #ddd; 
    height: calc(100% - (130px+130px)); 
}

來源

2017-04-10 11:53:28 Nikkorian

第二渦管？爲什麼？ – Kev

@Kev - 我太草率 - 我的意思是「搜索欄」。 – Nikkorian

可變尺寸中排的全高3排側欄

回答

相關問題