html - 如何获得页眉固定顶部、容器可滚动和页脚固定底部的侧边栏？

Question

我正在尝试制作侧边栏，这正是我所期待的:

• Header fixed top 和 Footer fixed bottom(我不知道“固定”是否正确，但我希望它们不要与边栏容器重叠)
• 可滚动的侧边栏容器

我尝试调整 div 的位置，但没有成功。我还尝试了粘性页脚的方法，但效果不佳。我试着用谷歌搜索我的问题，但大多数答案都是网站的整个布局。我需要它在我的侧边栏中工作。

这是我的:jsFiddle

代码有点长，所以我只贴出 CSS:

        html, body {
            height: 100%;           
        }


        #wrap {
            min-height: 100%;
            height: auto !important;
            height: 100%;            
            margin: 0 auto -60px;
        }

        #push, #footer {
            height: 60px;
        }

        .container-fluid {    
            width: 100%;
            height: 100%;
        }

        #content {
            position: absolute;
            width: 100%;
            bottom: 60px;
            top: 42px;
            right: 0px;
            left: 0px;
            padding: 0px;
        }

        #sidebar {    
            position:absolute;
            width:300px;
            height:100%;                    
        }

        #sidebar .ul-menu {
            margin:0px;
        }

        #sidenavbar .tabs-left>.nav-tabs>li>a{    
            margin: 0px;
            min-width: 30px;
            width: 70px;
            -webkit-border-radius: 0px 0 0 0px;
            -moz-border-radius: 0px 0 0 0px;
            border-radius: 0px 0 0 0px;
            border: 0px;
        }

        .sidebar-tab-content {
            background: #FFF;
            position: absolute;
            height: 100%;
            left: 94px;
            width:100%;
        }

        #sidenavbar .tabs-left>.nav-tabs {
            border: 0px;
        }      

        #footer {
            color: #FFF;
            background-color: #666;
        }

    .side-header, .side-footer {
        background: #AAF;    
    }
    h2 {
        margin: 0px;
   }

Answer 1

谢谢你的想法。我刚刚通过添加这些 css 代码 解决了我的问题:

       .side-header {
            position: absolute;
            top: 0px;
            right: 0px;
            left: 0px;
        }
        .side-container {
            position: absolute;
            bottom: 40px;
            top: 40px;
            overflow-y: auto;
        }

        .side-footer {
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }

这是 JSFiddle:http://jsfiddle.net/geddemet/XCn7C/

这个社区真的很有帮助。干杯!