我正在构建一个侧边栏菜单并搞砸了一些东西。当内容长于视口并且用户向下滚动时，侧边栏会被内容覆盖。
侧边栏应始终保持在100％高度，.box div固定在底部。
我已尝试将排名调整为absolute和fixed，并将主要内容区overflow调整为scroll以及其他一大堆内容不能让它发挥作用。
我做错了什么？
https://jsfiddle.net/timgavin/s3vga1mm/
body {
font-family: 'Open Sans', sans-serif;
}
#topbar {
height: 60px;
background: #F3F3F3;
}
/* sidebar is expanded by default */
#sidebar-wrapper {
position: absolute;
z-index: 1;
width: 250px;
min-height: 100%;
overflow-y: hidden;
overflow-x: visible;
background-color: #0F2849;
transition:.5s;
}
/* hamburger icon */
#sidebar-toggle {
float: left;
padding: 18px 20px 0 20px;
}
/* main content wrapper */
#content-wrapper {
position: absolute;
width: 100%;
padding-left: 250px;
transition:.5s;
font-size: 1.1em;
}
/* change the sidebar's width to zero to collapse the sidebar */
#wrapper.sidebar-hidden #sidebar-wrapper {
width: 0;
}
/* remove padding from main content so it collapses left with the sidebar */
#wrapper.sidebar-hidden #content-wrapper {
padding-left: 0;
}
/* add some padding to the top of the main content area without altering bootstrap classes */
#container-fluid {
padding-top: 20px;
}
/* TOP MENU CLASSES */
.logo {
width: 250px;
background-color: #0F2849;
height: 60px;
padding-top: 5px;
overflow: hidden;
float: left;
}
.logo img {
height: 45px;
}
.top-menu a {
color: #222;
}
.top-menu a:hover {
color: #82C2FA;
text-decoration: none;
}
.top-links {
float: left;
list-style: none;
padding: 2px 0 0 0;
}
.top-links li {
float: left;
padding: 20px 10px;
}
/* SIDE MENU */
.sidebar-nav {
padding: 20px 0 0 0;
list-style: none;
font-size: 1.1em;
}
.sidebar-nav li {
text-indent: 10px;
line-height: 44px;
width: 250px;
}
/* icon padding */
.sidebar-nav li i {
padding-right: 7px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li a:hover {
background-color: #0F2849;
color: #fff;
text-display: bold;
}
/* sub-menu links */
.sidebar-nav .panel-body a {
color: #87B2ED;
font-size: 0.9em;
}
.sidebar-nav .caret {
float: right;
margin: 22px 15px 0;
}
#sidebar-wrapper .box {
position: fixed; /* remove this style if you want the box to float directly below the menu */
bottom: 0; /* remove this style if you want the box to float directly below the menu */
border: 1px solid #3E526D;
border-radius: 5px;
margin: 40px 10px 10px 10px;
width: 230px;
padding: 10px
}
#sidebar-wrapper .box h4 {
color: #B8C0C9;
font-size: 1.1em;
margin: 0 0 20px 0;
}
#sidebar-wrapper .box h5 {
color: #87B2ED;
}
/* SUB MENU */
/* remove bootstrap's default panel styling */
.sidebar-nav .panel {
background: transparent;
border: 0;
padding: 0;
margin: 0;
}
.sidebar-nav .panel-body {
padding: 0;
background: #0F2849;
}
.sidebar-nav .panel-body ul {
list-style: none;
padding: 0;
}
.sidebar-nav .panel-body ul > li {
text-indent: 48px;
}
/* RESPONSIVE CLASSES */
/* mobile & tablet */
@media only screen and (max-width : 992px) {
/* sidebar is hidden by default */
#sidebar-wrapper {
width: 0;
}
/* content is flush-left by default */
#content-wrapper {
padding-left: 0;
}
/* change the sidebar's width to 250px to expand the sidebar */
#wrapper.sidebar-hidden #sidebar-wrapper {
width: 250px;
}
/* add padding to main content so it expands left with the sidebar */
#wrapper.sidebar-hidden #content-wrapper {
padding-left: 250px;
}
.logo {
width: 80px;
padding: 15px 7px 0 0;
}
.logo img {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="assets/css/app.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- top links, logo, hamburger icon, etc. -->
<div id="topbar">
<div class="logo">
<!-- remove <a> if desired, it has no affect on layout -->
<a href="/">
<!-- logo for desktop -->
<img src="assets/img/logo.png" class="hidden-xs hidden-sm hidden-md img-responsive center-block" alt="Company logo">
<!-- logo for mobile and tablet -->
<img src="assets/img/logo-sm.png" class="visible-xs visible-sm visible-md img-responsive center-block" alt="Company logo">
</a>
</div>
<div class="top-menu">
<!-- hamburger icon -->
<a href="#" id="sidebar-toggle">
<i class="fa fa-bars fa-fw fa-2x"></i>
</a>
<!-- top navigation links -->
<ul class="top-links">
<li>
<a href="#">
Link 1
</a>
</li>
<li>
<a href="#">
Link 2
</a>
</li>
</ul>
</div>
</div>
<!-- sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<!-- start collapsable menu item with sub-menu -->
<!--
duplicate as often as needed, just make sure to give
each instance a unique ID (#id-goes-here)
-->
<li class="panel panel-default">
<a href="#id-goes-here" data-toggle="collapse">
<i class="fa fa-ticket"></i>
<span>
Tickets
</span>
<span class="caret"></span>
</a>
<div id="id-goes-here" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>
<a href="#">
<span>
Link 1
</span>
</a>
</li>
<li>
<a href="#">
<span>
Link 2
</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<!-- end collapsable menu item with sub-menu -->
<!-- regular menu items without sub-menu -->
<li>
<a href="">
<i class="fa fa-pie-chart"></i>
<span>
Reports
</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-sign-out"></i>
<span>
Log Out
</span>
</a>
</li>
</ul>
<div class="box">
<h4>Support</h4>
<!--
// uncomment if you want titles
<h5>Email</h5>
-->
<p class="small">
<a href="mailto:email@email.com">
email@email.com
</a>
</p>
<!-- <h5>Call</h5> -->
<p class="small">
<a href="tel:877-379-8279">
123-456-7890
</a>
</p>
</div>
</div>
<!-- main content -->
<div id="content-wrapper">
<!-- .container-fluid to take up full width -->
<div class="container-fluid" id="container-fluid">
<!-- add main content here -->
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- stop main content here -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
答案 0 :(得分：1)
以下是我对CSS的更改。
#topbar {
height: 60px;
background: #F3F3F3;
position: fixed; /* Added this */
z-index: 200; /* Added this */
width: 100%; /* Added this */
}
/* Added this */
#sidebar-toggle:focus {
outline: none;
}
#content-wrapper {
position: absolute;
width: 100%;
transition:.5s;
font-size: 1.1em;
padding-left: 250px!important; /* Changed this */
margin-top: 50px; /* Added this */
}
#sidebar-wrapper {
position: fixed; /* Changed this */
z-index: 1;
width: 250px;
min-height: 100%;
overflow-y: hidden;
overflow-x: hidden; /* Changed this */
background-color: #0F2849;
transition:.5s;
}
答案 1 :(得分：-1)
移除位置并将其显示为块。
display: inline-block;