我正在尝试修复左侧div和页脚作为固定位置和滚动左侧潜水和右侧div内容应相应滚动,在我的情况下我的左侧div和页脚得到修复但滚动时我的左侧div内容不向上滚动根据附在此处的图片下来..
我不想给溢出y:自动到侧边栏它应该滚动窗口滚动,并且页脚应该始终只在底部固定。
我还附上了我的工作截图供参考。
#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>
&#13;
请在此处找到图片以供参考。
答案 0 :(得分:0)
HTML-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js">
</script>
<div id="wrapper">
<div class="col-lg-2 col-md-6 col-xs-12" id="sidebar-wrapper">
<div id="sidebar">
<div class="col-xs-12 col-sm-12 mb20">
<img class="profile-image" src="primage.png">
</img>
</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.
</br>
</br>
</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.
</br>
</br>
</li>
</ul>
</div>
</div>
<div class="col-lg-10 col-md-6 col-xs-12 pull-right" id="main-wrapper">
<div id="main">
<div class="col-lg-12">
ht ht
</div>
</div>
</div>
<div class="col-md-12 footer">
ht ht
</div>
</div>
</link>
CSS-
#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;
}
}
我已经纠正了您的错误,这是有效的代码。您做错了是在col-10之前关闭了#wrapper div,因此引导程序未正确实现。