html - 固定位置的左侧 div 和页脚无法正常工作

Question

我正在尝试将左 div 和页脚固定为位置固定，并且在滚动时左潜水和右 div 内容应该相应地滚动，在我的情况下我的左 div 和页脚得到固定但是在滚动时我的左 div 内容没有向上滚动并且按照此处所附的图片向下..

我不想给侧边栏 overflow-y: auto 它应该在窗口滚动时滚动，页脚应该始终固定在底部。

我还附上了我的工作截图以供引用。

#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>

请在此处找到图片以供工作引用。

Answer 1

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，因此 Bootstrap 没有正确实现。