响应式侧边栏也是固定的

Question

我有一个响应式设计，侧边栏占 25%，内容占 75%。我的问题是当我滚动页面时，侧边栏没有固定并且不会随着页面向下滚动。

我尝试将其设置为 position:fixed，但随后我失去了对内容的整个响应百分比。

我怎样才能做到这两点？

小提琴： http://codepen.io/anon/pen/oXMmOz

HTML

  <div class="container max-width">
    <div class="sidebar"></div>
    <div class="content"></div>
  </div>

CSS

.max-width {
  max-width: 1300px;
  margin: 0 auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-top: 54px;
}

.sidebar {
  background-color: red;
  width: 25%;
  padding-top: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;  
}

.content {
  background-color: black;
  width: 75%;
  margin-left: 25%;
  padding-top: 15px;
}

@media(max-width: 768px) {
  .sidebar {
    left: -200px;
    position: fixed;
  }
  .content {
    width: 100%;
    margin-left: auto;
  }
}

Answer 1

您将侧边栏定位为绝对。这将忽略父元素并使用主体作为参考。您应该使用位置：相对。

您还应该将内容浮动到右侧，而不是使用 25% 的左侧边距..

我会为你准备一把小提琴。我以前从未使用过codepen。

好的，看看这个。这是否接近您的目标？

http://codepen.io/anon/pen/pJZYvB

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.max-width {
  max-width: 1300px;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;

  left: 0px;




}

.sidebar {
  background-color: red;
  width: 25%;
  padding-top: 0;

  position: fixed;
  left: 0;
  top: 0;
  bottom: 0; 
  height: 100%;

}

.content {
  background-color: black;
  width: 75%;
  display: inline-block;
  float: right;
  padding-top: 15px;
}

@media(max-width: 768px) {
  .sidebar {
    left: -200px;
    position: fixed;
  }
  .content {
    width: 100%;
    margin-left: auto;
  }
}