As you see from the picture below the part of sidebar where I have scrollable TreeView didnt work, also I need to have fixed footer to this sidebar that doesn't move when user scroll the sidebar. How to fix it?
I want to have next structure.
.html
<div class="container-fluid max-height no-overflow">
<div class ="row max-height">
<form runat="server">
<!--SIDEBAR-->
<div class="col-sm-3 sidebar">
<div class="panel-body scrollable">
TREEVIEW HERE
</div>
<div class="panel-footer center-block">
BUTTON HERE
</div>
</div>
<!--MAIN CONTENT-->
<div class="col-sm-offset-3 main scrollable">
MAIN CONTENT HERE
</div>
</form>
</div>
</div>
</div>
css:
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: auto;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
}
}
.main {
padding-top: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 20px;
padding-left: 20px;
}
}
.panel-body{
overflow: auto;
}
.panel-footer{
background-color:#ff6a00;
}
您可以使用以下 HTML 代码:
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<div style="position:fixed; top:0; bottom:40px; overflow-y:scroll; float:none; width:inherit;">
<footer style="position:fixed; bottom: 0; height:40px; background-color:red;">footer</footer>
</div>
</div>
<div class="col-xs-9">
</div>
</div>
</div>
左侧及其页脚都有一个position: fixed
注意width: inherit
这保证了固定列与其父列具有相同的宽度。您可以对页脚执行相同的操作。
要激活滚动条,您应该设置top
and bottom
属性根据有一个固定位置的 div,如果内容溢出则需要滚动 https://stackoverflow.com/questions/16094785/have-a-fixed-position-div-that-needs-to-scroll-if-content-overflows
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)