我遇到了一个我无法修复的问题，我有一个顶栏和侧栏，当页面调整大小时，侧边栏位于顶栏下面的绝对位置，因此它与我的内容重叠
我给你留下我的css代码：
body{
padding-top: 50px;
}
/* ADMIN NAVBAR */
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
}
}
.navbar-top-links {
margin-right: 0;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
@media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
/*FIN ADMIN NAVBAR*/
这是html：
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost:8000">SCM</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li><a href="http://localhost:8000"><i class="fa fa-home fa-fw"></i></a>
<!-- /.dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-fw"></i><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://localhost:8000/user/profile/1">Perfil</a></li>
<li><a href="http://localhost:8000/user">Administrar</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://localhost:8000/logout"><i class="fa fa-sign-out fa-fw"></i>Logout</a></li>
</ul>
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="active" >
<a href="#"><i class="fa fa-users fa-fw"></i> Usuario<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/user/create"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a class="active" href="http://localhost:8000/user"><i class='fa fa-list-ol fa-fw'></i> Mostrar todos los usuarios</a>
</li>
<li>
<a data-toggle="modal" data-target="#searchModal_admin" href="#"><i class='glyphicon glyphicon-search fa-fw'></i> Busqueda avanzada</a>
</li>
</ul>
</li>
<li >
<a href="#"><i class="fa fa-tags fa-fw"></i> Ejercicios<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/exercise/create"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a class="active" href="http://localhost:8000/exercise"><i class='fa fa-list-ol fa-fw'></i>Listar</a>
</li>
<li >
<a href="#"><i class="fa fa-certificate"></i> Categoria<span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="http://localhost:8000/exercise/activity/create"><i class='fa fa-plus fa-fw'></i> Agregar
</a>
</li>
<li>
<a href="http://localhost:8000/exercise/activity"><i class='fa fa-list-ol fa-fw'></i> Listar
</a>
</li>
</ul>
</li>
</ul>
</li>
<!--BLOG-->
<li >
<a href="#"><i class="fa fa-newspaper-o fa-fw"></i> Noticias<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/blog/create"><i class='fa fa-plus fa-fw'></i> Añadir Noticia</a>
</li>
<li>
<a class="active" href="http://localhost:8000/blog"><i class='fa fa-list-ol fa-fw'></i> Mostrar todas las noticias</a>
</li>
<li><a href="#"><i class="fa fa-tag"></i> Tags<span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="http://localhost:8000/blog/tag/create"><i class='fa fa-plus fa-fw'></i> Agregar
</a>
</li>
<li>
<a href="http://localhost:8000/blog/tag"><i class='fa fa-list-ol fa-fw'></i> Listar
</a>
</li>
</ul>
</ul>
</li>
<!--BLOG-->
<li >
<a href="#"><i class="fa fa-cogs fa-fw"></i> Configuración<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/config/personal"><i class='glyphicon glyphicon-user'></i> Información personal
</a>
</li>
<li>
<a href="http://localhost:8000/config/theme"><i class='fa fa-pencil fa-fw'></i> Tema
</a>
</li>
</ul>
</li>
<li >
<a href="http://localhost:8000/admin/mail/comunicado"><i class="glyphicon glyphicon-envelope"></i> Enviar Comunicado</a>
</li>
<li >
<a href="#"><i class="glyphicon glyphicon-credit-card"></i> Tipos de pago<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/pagos/nuevo"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a class="active" href="http://localhost:8000/pagos"><i class='fa fa-list-ol fa-fw'></i> Mostrar tipos de pago</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<form method="POST" action="http://localhost:8000/user/search" accept-charset="UTF-8" class="navbar-form-expanded navbar-form navbar-right visible-lg-block visible-md-block visible-xs-block" id="formSimpleSearch_admin"><input name="_token" type="hidden" value="5Nv6nmk6CZ0yAeKNEDZ7KUaN45ewvVV9EqUZSpsc">
<div class="input-group" id ="divSearch_admin" style="width:100%">
<input type="search" class="form-control" placeholder="Buscar …" name="name" style="background-color:#efeded;">
<span class="input-group-btn"><button class="btn btn-default" type="submit" style="background-color:#222222"><i class="fa fa-search" style="color:#9d9d9d;"></i> </button></span>
</div>
</form>
<table class="table table-striped">
<thead>
<th>Nombre</th>
<th>Email</th>
<th>Telefono</th>
<th>Tarifa</th>
<th>Operaciones</th>
</thead>
<tbody>
<td>Alvaro Rubio García</td>
<td>alvarorubio77@gmail.com</td>
<td>666777887</td>
<td>Tipo de pago 1</td>
<td>
<a href="http://localhost:8000/user/edit/1" class="btn btn-primary">Editar</a>
</td>
</tbody>
</table>
</div>
</div>
<!-- /#wrapper -->
谢谢！
答案 0 :(得分：0)
试试这个。只是对你的html结构做了一些小改动。我想这就是你想要的。
你的侧边栏就像一个可折叠的菜单。为此，我已将<div class="sidebar-nav navbar-collapse collapse">替换为<div class="sidebar-nav navbar-collapse collapse" aria-expanded="false" style="height: 1px;">。
调整了#page-wrapper中的上边距，使其更加美观。
body{
padding-top: 50px;
}
/* ADMIN NAVBAR */
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 60px 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
height: 1px;
}
}
.navbar-top-links {
margin-right: 0;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
@media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost:8000">SCM</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li><a href="http://localhost:8000"><i class="fa fa-home fa-fw"></i></a>
<!-- /.dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-fw"></i><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://localhost:8000/user/profile/1">Perfil</ a></li>
<li><a href="http://localhost:8000/user">Administrar</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://localhost:8000/logout"><i class="fa fa-sign-out fa-fw"></i>Logout</a></li>
</ul>
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav" id="side-menu">
<li class="active" >
<a href="#"><i class="fa fa-users fa-fw"></i> Usuario<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/user/create"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a class="active" href="http://localhost:8000/user"><i class='fa fa-list-ol fa-fw'></i> Mostrar todos los usuarios</a>
</li>
<li>
<a data-toggle="modal" data-target="#searchModal_admin" href="#"><i class='glyphicon glyphicon-search fa-fw'></i> Busqueda avanzada</a>
</li>
</ul>
</li>
<li >
<a href="#"><i class="fa fa-tags fa-fw"></i> Ejercicios<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/exercise/create"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a class="active" href="http://localhost:8000/exercise"><i class='fa fa-list-ol fa-fw'></i>Listar</a>
</li>
<li >
<a href="#"><i class="fa fa-certificate"></i> Categoria<span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="http://localhost:8000/exercise/activity/create"><i class='fa fa-plus fa-fw'></i> Agregar
</a>
</li>
<li>
<a href="http://localhost:8000/exercise/activity"><i class='fa fa-list-ol fa-fw'></i> Listar
</a>
</li>
</ul>
</li>
</ul>
</li>
<!--BLOG-->
<li >
<a href="#"><i class="fa fa-newspaper-o fa-fw"></i> Noticias<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/blog/create"><i class='fa fa-plus fa-fw'></i> Añadir Noticia</a>
</li>
<li>
<a class="active" href="http://localhost:8000/blog"><i class='fa fa-list-ol fa-fw'></i> Mostrar todas las noticias</a>
</li>
<li><a href="#"><i class="fa fa-tag"></i> Tags<span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="http://localhost:8000/blog/tag/create"><i class='fa fa-plus fa-fw'></i> Agregar
</a>
</li>
<li>
<a href="http://localhost:8000/blog/tag"><i class='fa fa-list-ol fa-fw'></i> Listar
</a>
</li>
</ul>
</ul>
</li>
<!--BLOG-->
<li >
<a href="#"><i class="fa fa-cogs fa-fw"></i> Configuración<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/config/personal"><i class='glyphicon glyphicon-user'></i> Información personal
</a>
</li>
<li>
<a href="http://localhost:8000/config/theme"><i class='fa fa-pencil fa-fw'></i> Tema
</a>
</li>
</ul>
</li>
<li >
<a href="http://localhost:8000/admin/mail/comunicado"><i class="glyphicon glyphicon-envelope"></i> Enviar Comunicado</a>
</li>
<li >
<a href="#"><i class="glyphicon glyphicon-credit-card"></i> Tipos de pago<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="http://localhost:8000/pagos/nuevo"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a class="active" href="http://localhost:8000/pagos"><i class='fa fa-list-ol fa-fw'></i> Mostrar tipos de pago</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<form method="POST" action="http://localhost:8000/user/search" accept-charset="UTF-8" class="navbar-form-expanded navbar-form navbar-right visible-lg-block visible-md-block visible-xs-block" id="formSimpleSearch_admin"><input name="_token" type="hidden" value="5Nv6nmk6CZ0yAeKNEDZ7KUaN45ewvVV9EqUZSpsc">
<div class="input-group" id ="divSearch_admin" style="width:100%">
<input type="search" class="form-control" placeholder="Buscar …" name="name" style="background-color:#efeded;">
<span class="input-group-btn"><button class="btn btn-default" type="submit" style="background-color:#222222"><i class="fa fa-search" style="color:#9d9d9d;"></i> </button></span>
</div>
</form>
<table class="table table-striped">
<thead>
<th>Nombre</th>
<th>Email</th>
<th>Telefono</th>
<th>Tarifa</th>
<th>Operaciones</th>
</thead>
<tbody>
<td>Alvaro Rubio García</td>
<td>alvarorubio77@gmail.com</td>
<td>666777887</td>
<td>Tipo de pago 1</td>
<td>
<a href="http://localhost:8000/user/edit/1" class="btn btn-primary">Editar</a>
</td>
</tbody>
</table>
</div>
</div>
<!-- /#wrapper -->