【发布时间】：2021-03-09 06:39:47
【问题描述】：
我的侧边栏位置与其他内容相关。当我将侧边栏位置更改为固定时，它与内容重叠，并且与相对位置相比，位置设置为固定时效果不佳。我希望我的侧边栏与页面一起移动，同时保持对其他内容的响应。任何帮助都将不胜感激。
我的 CSS：
.side-menu #dropdown {
border: 0;
margin-bottom: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.side-menu #dropdown .caret {
float: right;
margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
float: right;
}
.side-menu #dropdown > a {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body {
padding: 0;
background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
width: 100%;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
border-bottom: 1px solid #e7e7e7;
}
.side-menu {
position: relative;
top: 0;
left: 0;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 1px;
}
/* When you mouse over the navigation links, change their color */
.side-menu a:hover {
color: #f1f1f1;
}
HTML：
<html>
<head>
<meta name="description" content="Bootstrap.">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js" defer></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<!-- THIS LINE -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="menu-container">
<div class="col-md-2 sidebar">
<div class="row">
<!-- uncomment code for absolute positioning tweek see top comment in css -->
<!-- Menu -->
<div class="side-menu" >
<nav class="navbar navbar-default" id="this_navigation" role="navigation" >
<!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav sidebar-side">
<li class="active"><a href="/index/<%= role %>/<%= _id %>" style="color: gray;"><span class="glyphicon glyphicon-dashboard"></span> Home</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="col-md-7 content">
<div class="container">
<div class="row">
<!--<div class="panel panel-primary" hidden>
<div class="panel-heading">
<h3 class="panel-title" align="center">Car Tracking Device Information</h3>
</div>
</div>-->
<div class="container" align="center">
<div class="row" >
<h3 >Filter Tables</h3>
<p >Type something in the input field to search the devices for country, manufacturer, models or versions:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search.." style="width: 50%; height:36px;"/>
</div></div>
<br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
标签： javascript html css