内容滚动期间Bootstrap侧边栏菜单重叠

Question

I'm building a sidebar menu and have screwed something up. When the content is longer than the viewport, and the user scrolls down, the sidebar is covered up by the content.

The sidebar should always stay at 100% height, with the .box div fixed at the bottom.

I've tried adjusting the position to absolute and fixed , and adjusting the main content area overflow to scroll and a whole bunch of other things and just can't get it to work.

What did I do wrong?

---

Here's a Fiddle

https://jsfiddle.net/timgavin/s3vga1mm/

---

The CSS

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;
    }
}

The HTML

<!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>

Answer 1

Yo timgavin, take a look at this and tell me what you think or if there's any changes you want me to make for you! https://jsfiddle.net/s3vga1mm/4/

Here are my changes to your 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;
}

Answer 2

移除位置并将其显示为块。

display: inline-block;