左侧div和footer作为位置固定不能正常工作

时间:2017-12-19 06:59:18

标签: html css twitter-bootstrap

我正在尝试修复左侧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;
&#13;
&#13;

请在此处找到图片以供参考。

enter image description here

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,因此引导程序未正确实现。