Jquery 响应性侧边栏也是固定的

我有一个反应灵敏的设计，我的边栏占25%，我的内容占75%。我的问题是当我滚动页面时，侧边栏不是固定的，不能随页面向下滚动

我试着让它的位置：固定，但我失去了整个百分比的内容响应

如何实现这两个目标

小提琴：

HTML

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

---

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

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

我给你做一把小提琴。我以前从未用过密码笔

好的，看看这个。这接近你想要的吗

---

非常感谢。期待您的到来！更新我的答案，看一看，让我知道是好是坏。哈哈：）谢谢，我刚看了一下，但我无法使两列居中，我尝试了margin:0 auto，但它不起作用。所以你希望左侧边栏不在左侧？

.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;
  }
}

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;
  }
}