响应边栏也是固定的

Question

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

我尝试将其定位：固定，但随后我放弃了对内容的整体百分比响应。

我怎样才能实现这两个目标？

小提琴： 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

您将侧边栏定位为绝对边栏。这将忽略父元素并使用body作为引用。你应该使用position：relative。

你也应该正确地浮动内容，而不是使用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;
  }
}