Javascript 侧边栏和框架CSS

我试图在960px宽的骨架容器旁边放置一个侧栏。我已经成功地做到了这一点，但我正在寻找一种更好的方法来做到这一点，同时保持容器在屏幕上居中

通过给它一个负边距，我可以将它浮动到它所在的容器外部（

#holder

）。然而，这是非常糟糕的，并没有那么好的工作。通过调整屏幕的大小，我希望侧边栏被剪切，使其位于顶部（就像在使用媒体查询的手机上），但这种方式似乎不可能

---

有没有更好的方法来组织这个？我愿意使用JavaScript库，只要它工作得很好。

将侧栏

设置为绝对的

，并将其独立放置在布局其余部分的

z-index

之上

• 注：我在

  #holder

  中注释了

  960px

  宽度

  ，只是为了演示（因为snippet视口较小，否则会溢出），还添加了侧栏jQuery切换，以达到同样的目的

你的小提琴：

我的小提琴：

下面的片段：

$（.container”）。在（“单击”，函数（）{
$（“旁白”）.toggleClass（“旁白”）；
});
*{
框大小：边框框；
}
html，
身体{
宽度：100%；
身高：100%；
}
#持有者{
/*宽度：960px*/
位置：相对位置；
保证金：0自动；
身高：100%；
}
旁白{
宽度：250px；
背景：黑色；
颜色：白色；
位置：绝对位置；
排名：0；
左：-170px；
z指数：1；
过渡：全部。4s放松；
}
.摊牌{
左：0；
}
.集装箱{
边框：1px纯黑；
}

边栏在这里
您好-单击以显示/隐藏侧边栏
我已经制作了一个可能有用的代码笔，您可以更改其中的内容和样式，然后查看。内容容器有一个固定的宽度，当东西不合适时就会折叠。我也在这里弹出了Sass和HTML。这应该只是一个如何实现的例子，在现实中，出于明显的响应性原因，使用百分比可能会更好


样式是在Sass中完成的

.page-container {

  background: #607D8B;
  min-height: 100vh;

}

.content {
  padding: 10px 20px  
}

.sidebar {
  background: #009688;  
}

.inner-wrapper {

  background: #00bcd4;
  margin: 0 auto;
  max-width: 960px;
  position: relative;

}

@media all and (min-width: 1362px) {

  .sidebar {
    width: 200px;
    position: absolute;
    left: 0;
    transform: translateX(-100%);

  }

}

和HTML

<div class="page-container">

  <div class="inner-wrapper">

    <div class="sidebar">

      <ol>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor.</li>
      </ol>

    </div>

    <div class="content">

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt facere expedita voluptatem reprehenderit, asperiores architecto magni laborum repellat perferendis voluptas alias autem cumque iste dignissimos ab officiis totam blanditiis ratione.</p>

    </div>

  </div>

</div>


洛雷姆·伊普苏姆·多洛
洛雷姆·伊普苏姆·多洛
洛雷姆·伊普苏姆·多洛
Lorem ipsum dolor sit amet，奉献精英。为了满足大众的需求，建筑设计师将其设计成了一种全新的建筑风格，并将其命名为autem cumque iste Dignessimos ab officiis totam blanditiis Orience


希望有帮助。
它不像我的容器那样放在容器的旁边（有几个像素的边距）。啊，你想让那个位可见吗？添加了它，请注意，它将溢出内容，因为snippet.No上的viewport较小。我希望侧边栏贴在容器上，同时保持容器居中。“我正试图在960px宽的骨架容器旁边放置一个侧边栏”是我问题的第一句话。侧边栏以与您使用的值完全相同的值粘贴在容器旁边，只是它是独立的，并且在淡入时不会推动任何内容。。检查外部提琴。然后让我问，为什么你的和我的不同？但是没有骨架CSS。好的，我已经更新了代码笔以包含骨架，并使用了他们的一些类。虽然我最初的回答只是想以一种不可知论的方式，作为你如何处理这个问题的基础。
<div class="page-container">

  <div class="inner-wrapper">

    <div class="sidebar">

      <ol>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor.</li>
      </ol>

    </div>

    <div class="content">

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt facere expedita voluptatem reprehenderit, asperiores architecto magni laborum repellat perferendis voluptas alias autem cumque iste dignissimos ab officiis totam blanditiis ratione.</p>

    </div>

  </div>

</div>