左侧div和footer作为位置固定不能正常工作
我正在尝试修复左侧div和页脚作为固定位置和滚动左侧潜水和右侧div内容应相应滚动，在我的情况下我的左侧div和页脚得到修复但滚动时我的左侧div内容不向上滚动根据附在此处的图片下来..
我不想给溢出y：自动到侧边栏它应该滚动窗口滚动，并且页脚应该始终只在底部固定。
我还附上了我的工作截图供参考。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
#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>
请在此处找到图片以供参考。
1 个答案:
答案 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，因此引导程序未正确实现。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？