这个小提琴:https://jsfiddle.net/j1tuw3vj/43/接近我想要实现的目标,但我希望中间可滚动部分(.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>
&#13;
答案 0 :(得分:2)
您可以将css numpy.vectorize
属性用于侧边栏的高度:
z = numpy.fromfunction(numpy.maximum, (2, 2), dtype=int)
其中130px是底部搜索框的高度。
答案 1 :(得分:1)
对此没有特定的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;
}
答案 2 :(得分:1)
您可以使用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/
希望这会有所帮助。欢呼声。
答案 3 :(得分:0)
尝试更改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));
}