【发布时间】：2018-07-18 01:04:47
【问题描述】：
我正在尝试将左 div 和页脚修复为固定位置，并且在滚动时左下潜和右 div 内容应相应滚动，在我的情况下，我的左 div 和页脚已修复，但在滚动时我的左 div 内容没有向上滚动并且按照此处所附的图片进行下载..
我不想给侧边栏提供overflow-y: auto 它应该在windows滚动时滚动，并且页脚应该总是固定在底部。
我还附上了我的工作截图以供参考。
#wrapper {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
width: 100%;
}
#sidebar-wrapper {
height: 100%;
padding: 0px;
position: fixed;
border-right: 1px solid #ddd;
z-index: 1000;
}
#sidebar {
position: relative;
height: 100%;
overflow-y: auto;
}
#main-wrapper {
height: 100%;
padding: 0px;
}
#main {
position: relative;
height: 100%;
padding: 0px;
}
#sidebar .list-group-item {
border-radius: 0;
border-left: 0;
border-right: 0;
border-top: 0;
}
.footer {
background-color: #ffffff;
bottom: 0;
position: fixed;
padding: 10px 0px;
border-top: 1px solid #ddd;
}
@media (max-width: 992px) {
body {
padding-top: 0px;
}
}
@media (min-width: 992px) {
#main-wrapper {
float: right;
}
}
@media (max-width: 992px) {
#main-wrapper {
padding-top: 0px;
}
}
@media (max-width: 992px) {
#sidebar-wrapper {
position: static;
height: auto;
max-height: 300px;
border-right: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="wrapper">
<div id="sidebar-wrapper" class="col-lg-2 col-md-6 col-xs-12">
<div id="sidebar">
<div class="col-xs-12 col-sm-12 mb20"> <img class="profile-image" src="primage.png"> </div>
<h3>General Information</h3>
<ul class="profile-details">
<li>
<div><i class="fa fa-building-o"></i> Party Name</div> Congress </li>
<li>
<div><i class="fa fa-briefcase"></i>position</div> Party President </li>
<li>
<div><i class="fa fa-briefcase"></i>Winner</div> Rank No.1 </li>
</ul>
<h3>Contact Information</h3>
<ul class="profile-details">
<li>
<div><i class="fa fa-phone"></i> phone</div> +91 022 28106240 </li>
<li>
<div><i class="fa fa-tablet"></i> mobile phone</div> +91 9819046204 </li>
<li>
<div><i class="fa fa-envelope"></i> e-mail</div> Rahul@rediffmail.com </li>
<li>
<div><i class="fa fa-map-marker"></i>current address</div> B-301,Akansha Tower
<br> Naya Nagar, Mira Road - E
<br> Dist. Thane - 401107. </li>
<li>
<div><i class="fa fa-map-marker"></i>permanent address</div> B-301,Akansha Tower
<br> Naya Nagar, Mira Road - E
<br> Dist. Thane - 401107. </li>
</ul>
</div>
</div>
</div>
<div id="main-wrapper" class="col-lg-10 col-md-6 col-xs-12 pull-right">
<div id="main">
<div class="col-lg-12"> ht ht </div>
</div>
</div>
<div class="col-md-12 footer"> ht ht </div>请在此处找到图片以供工作参考。
【问题讨论】：
-
没有图片链接
-
你能不能把这一切弄得一团糟
标签： html css twitter-bootstrap