css - Sidebar not going full height of page -
i have side bar called column left. reason not go full height of page when have panels on view.
i use bootstrap fixed navbar @ top.
question: why side bar "column left" not going full height every page size is. best solution solve it?
codepen preview
code view http://codepen.io/riwakawebsitedesigns/pen/bdagro/
full view 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 bootstrap hidden , 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: 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: 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 { font-size: 14px; } #column-left.active #menu > li > > 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 { text-decoration: none; display: block; padding: 10px; cursor: pointer; border-bottom: 1px solid #515151; } #menu li { font-size: 16px; } #menu > li > { color: #c4c4c4; font-size: 14px; padding-left: 13px; border-bottom: 1px solid #585858; } #menu > li > a:hover { background-color: #444444; } #menu > li > > span { display: none; margin-left: 8px; } #menu li li { 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 > { color: #dddddd; background: #373737; } #menu li.active li { 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 { padding-left: 20px; } #menu li li ul { padding-left: 40px; } #menu li li li ul { padding-left: 60px; } #menu li li li li ul { padding-left: 80px; } /* panels */ .panel { border-radius: 0px; } .panel .panel-heading { position: relative; } .panel-heading h3 { margin-right: 8px; -webkit-tap-highlight-color: rgba(0,0,0,0); } .panel-heading { 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; }
i believe adding 'position:fixed;' #column-left should trick.
in case no matter how large/long content is, sidebar remain @ 100% height of viewport, fixed @ left side of screen.
div#column-left { width: 50px; min-height: 100% !important; background-color: #515151; position: fixed; top: 0px; padding-top: 100px; z-index: 10; -webkit-transition: 0.3s; transition: 0.3s; }
Comments
Post a Comment