全高3行側邊欄，中間行大小可變
[英]Full-height 3-row sidebar with variable-size middle row
問題描述
這個小提琴： https : .scrollable與我要達到的目標很接近，但是我希望中間的可滾動部分（ .scrollable ）擴展以填充可用空間-無論如何內容位於頂部和底部的“搜索欄”占位符中，而不管用戶窗口的高度如何。 即底部搜索欄應與底部齊平。 在Bootstrap上下文中實現此目標的最佳方法是什么？
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>
4 個解決方案
解決方案1
2 2017-04-10 11:34:57
解決方案2
1 已采納 2017-04-10 11:37:16
確實沒有特定的Bootstrap方法。 我認為最好的方法是使側欄成為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;
}
解決方案3
1 2017-04-10 11:38:03
您可以使用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/
希望這可以幫助。 干杯。
解決方案4
0 2017-04-10 11:53:28
嘗試更改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));
}
全高側邊欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.