Question

我有一个名为栏的侧栏。出于某种原因，当我在视图上有额外的面板时，它不会达到页面的整个高度。

我使用bootstrap以及顶部固定的导航栏。

问题：为什么每个页面大小都是侧栏“左栏”没有达到全高。什么是解决它的最佳解决方案？

Codepen预览

代码视图 http://codepen.io/riwakawebsitedesigns/pen/bdaGro/

完整视图 http://codepen.io/riwakawebsitedesigns/full/bdaGro/

@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);

/* Global */
body {
    /*height: 100%;*/
    margin: 0;
    /*min-height: 100% !important;*/
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    padding-top: 70px;
    width: 100%;
}

#user-bar-chart {
    height: 300px;
}

#client-bar-chart {
    height: 300px;
}

a,
a:hover, 
a:focus {
    cursor: pointer;
    text-decoration: none;
}

tr:hover a.dashboard-user:after {
    font-family: FontAwesome;
    content: "\f044";
    font-size: 14px;
}

/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
    display: inline;
}

/* Layout  */

.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

#content {
    padding-bottom: 40px;
    transition: all 0.3s;
}

/* Column Left  */

#column-left {
    width: 50px;
    min-height: 100% !important;
    background-color: #515151;
    position: absolute;
    top: 0px;
    padding-top: 100px;
    z-index: 10;
    transition: all 0.3s;
}


#column-left + #content {
    margin-left: 50px;
}

#column-left + #content + #footer {
    margin-left: 50px;
}

@media (max-width: 767px) {
    #column-left {
        overflow: hidden;
        display: none;
    }

    #column-left + #content {
        margin-left: 0;
    }

    #column-left + #content + #footer {
        margin-left: 0;
    }

}

/* Column Left Active */

#column-left.active {
    width: 235px;
    display: block;
}

@media (min-width: 768px) {

#column-left.active {
    overflow: auto;
}

#column-left.active + #content {
    margin-left: 235px;
}

#column-left.active + #content + #footer {
    margin-left: 235px;
}

}

@media (max-width: 767px) {

    #column-left.active + #content {
        position: relative;
        left: 235px;
    }

    #column-left.active + #content + #footer {
        position: relative;
        left: 235px;
    }

}

#column-left.active {
    width: 235px;
}

#column-left.active #menu li i {
    font-size: 14px;
}

#column-left.active #menu > li > a > span {
    display: inline;
}

#column-left.active #menu > li > ul {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    visibility: visible;
}

/* Top Navbar */

.menu {
    background: #eeeeee none repeat scroll 0 0;
}

.navbar {
    background-color: #fff !important;
    border: 0 none;
    border-radius: 0;
    color: #666;
    margin-bottom: 0;
}

.navbar.navbar-shadow {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}

#button-menu {
    display: inline-block;
    cursor: pointer;
    color: #6D6D6D;
}


@media (max-width: 640px) {
    .navbar-brand {
        font-size: 14px;
        padding: 15px 7px;
    }
}

/* Sidebar Menu */

#menu, 
#menu ul, 
#menu li {
    padding: 0;
    margin: 0;
    min-height: 100%;
    list-style: none;
}

#menu {
    margin-bottom: 25px;
}

#menu > li {
    position: relative;
}

#menu li a {
    text-decoration: none;
    display: block;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #515151;
}

#menu li a i {
    font-size: 16px;
}

#menu > li > a {
    color: #C4C4C4;
    font-size: 14px;    
    padding-left: 13px;
    border-bottom: 1px solid #585858;
}

#menu > li > a:hover {
    background-color: #444444;
}

#menu > li > a > span {
    display: none;
    margin-left: 8px;
}

#menu li li a {
    color: #9d9d9d;
}

#menu li li a:hover {
    color: #FFFFFF;
    background-color: #373737;
}

#menu li li a:before {
    content: "\f101";
    font-size: 14px;
    font-family: FontAwesome;
    margin-left: 10px;
    margin-right: 10px;
    transition: margin ease 0.5s;   
}

#menu li li a:hover:before {
    margin-right: 20px;
}

#menu > li.active > a {
    color: #DDDDDD;
    background: #373737;
}

#menu li.active li a {
    color: #C4C4C4;
}

#menu li li.active > a:last-child {
    color: #FFFFFF;
}

#menu li li.active a:last-child:before {
    margin-left: 20px;
    margin-right: 10px;
}

#menu > li > ul {
    position: absolute;
    left: 50px;
    top: 0px;
    width: 210px;
    background-color: #444444;
    visibility: hidden;
}

#menu li ul {
    overflow: hidden;
}

#menu > li:hover > ul {
    visibility: visible;
}

#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul a {
    padding-left: 20px;
}

#menu li li ul a {
    padding-left: 40px;
}

#menu li li li ul a {
    padding-left: 60px;
}

#menu li li li li ul a {
    padding-left: 80px;
}

/* Panels */
.panel {
    border-radius: 0px;
}
.panel .panel-heading {
    position: relative;
}
.panel-heading h3 i {
    margin-right: 8px;  
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.panel-heading i {
    font-size: 16px;
    font-weight: 500;   
}
.panel-heading h3 {
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
}

/* Primary Panel */
.panel-primary {
    border: 1px solid #c3e4f6;
    border-top: 2px solid #5cb7e7;
}

.panel-primary .panel-heading {
    color: #1e91cf;
    border-color: #96d0f0;
    background: white;
}

/* Default Panel */
.panel-default {
    border: 1px solid #e8e8e8;
    border-top: 2px solid #bfbfbf;
}

.panel-default .panel-heading {
    color: #595959;
    border-color: #e8e8e8;
    background: #fcfcfc;
}

/* Info Panel */
.panel-info {
    border: 1px solid #e8e8e8;
    border-top: 2px solid #3c8dbc;
}

.panel-info .panel-heading {
    color: #595959;
    border-color: #e8e8e8;
    background: #fcfcfc;
}

Answer 1

我相信将'position:fixed;'添加到#column-left应该可以解决问题。

在这种情况下，无论您的内容有多大/多长，侧边栏将始终保持在视口高度的100％处，固定在屏幕的左侧。

div#column-left {
  width: 50px;
  min-height: 100% !important;
  background-color: #515151;
  position: fixed;
  top: 0px;
  padding-top: 100px;
  z-index: 10;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

Answer 2

如果您希望左列占据页面的整个高度，请将您的正文设置为<#assign security=JspTaglibs[ "/security.tld" ]>。我还会通过移除您的position: relative并在列上设置min-height来明确地将您的专栏设置为完全高度：

top: 0; bottom:0;

Answer 3

它实际上是视口高度的100％。（不是页面长度的100％）。你能做什么：

#column-left { position: fixed; }
在display: table-cell和#column-left

#content

使用flexbox（取决于您是否必须支持旧浏览器）

Answer 4

我不确定滚动页面时是否重要，但您可以将其设为position:fixed。

也许这对你来说很容易解决

边栏没有达到页面的全高

4 个答案: