如何获得顶部固定、容器可滚动和底部固定的侧边栏？答案

【问题标题】：How to get a sidebar with header fixed top, container scrollable and footer fixed bottom?如何获得顶部固定、容器可滚动和底部固定的侧边栏？
【发布时间】：2013-07-29 08:34:14
【问题描述】：

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

顶部固定页眉和固定底部页脚（我不知道“固定”是否正确，但我希望它们不要与侧边栏容器重叠）
可滚动的侧边栏容器

我尝试使用 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;
   }

【问题讨论】：

让我坦率地告诉你，伙计。这是一个难看的布局
您想要的输出正是您从小提琴中粘贴的内容。所以我在这里有点困惑
是的，我知道，这只是一个示例代码。对我来说更重要的是解决我的问题。
你的问题到底是什么。阅读我的第二条评论
不，不是，看看页眉和页脚之间的容器。

标签： html css twitter-bootstrap sidebar

【解决方案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/

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

【讨论】：

【解决方案2】：

我将它用于我的footer。它对我有用，页眉和页脚保持在同一个位置，如果带有滚动条的内容变大，页脚将扩展。至于带有滚动条的框，我相信您需要在 CSS 中为您想要有滚动条的框添加类似 overflow:hidden 的内容。

【讨论】：

【解决方案3】：

您可以将overflow: auto 应用于您的内容 div。

请参阅minimal example 了解它的工作原理。

【讨论】：

【解决方案4】：

看看我的示例

sample

将侧边栏和右侧内容设置为绝对位置时效果不佳。如果正确的内容是不可预测的，那么您的设计应该会给您带来麻烦，并对其进行更多定制。

.sidebar-tab-content {
    background: #FFF;
    width: 100%;
    height: 500px; /*you could change it to 100% depend your need*/
}

已编辑：请查看我的 jsfiddle 示例代码，上面我放在这里的 CSS 比例只是一小部分更改

【讨论】：

他的内容没有指定高度。
@msbodetti 正如我所见，他已将其设置为 100%，我还注意到他已经可以将其删除。怎么了？
抱歉，现在才看到！

【解决方案5】：

您正在寻找position: fixed

FIDDLE Full screen Normal Fiddle

CSS：

 .side-header{
            background: #AAF;  
            position: fixed;
            width: 100%;
        }
 .side-footer {
            background: #AAF;
            position:fixed;
            bottom:60px;
            width: 100%;
        }

但是您将不得不使用宽度，因为它占用了容器宽度 div。

【讨论】：