0

我正在尝试制作一个侧边栏，这就是我所期待的： 在此处输入图像描述

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

我试图玩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;
   }
4

5 回答 5

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/

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

于 2013-07-29T00:34:14.797 回答
0

您可以申请overflow: auto到您的内容 div。

请参阅这个如何工作的最小示例。

于 2013-07-26T10:10:01.937 回答
0

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

于 2013-07-26T10:06:59.907 回答
-1

看看我的样本

样本

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

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

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

于 2013-07-26T10:47:16.257 回答
-2

你在寻找position: fixed

小提琴全屏 普通小提琴

CSS：

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

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

于 2013-07-26T09:50:22.713 回答