Question

我正在尝试在960px宽的Skeleton容器旁边放置一个侧边栏。我已成功完成了这项工作，但我正在寻找一种更好的方法，同时保持容器在屏幕上居中。

aside {
    width: 250px;
    float: left;
    margin-left: -170px;
}

通过给它一个负余量，我可以将它浮动到它所在的容器之外（#holder）。然而，这是非常糟糕的，并没有那么好。通过调整屏幕大小，我希望侧边栏能够切割，以便它位于顶部（就像在使用媒体查询的手机上一样），但这似乎不可能这样。

有没有更好的方法来构建它？我愿意使用JavaScript库，只要它运行良好。

Answer 1

制作侧边栏absolute并将其与其余版面中的z-index分开独立。

注意我在960px评论width #holder只是为了演示（因为片段视口较小，否则会溢出），同时还添加了侧边栏jQuery切换。

你的小提琴：

我的小提琴：

<强> External Fiddle if you wish to resize

以下代码段：

＆＃13;

$(".container").on("click", function() {
  $("aside").toggleClass("showAside");
});

＆＃13;

* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#holder {
  /* width: 960px; */
  position: relative;
  margin: 0 auto;
  height: 100%;
}
aside {
  width: 250px;
  background: black;
  color: white;
  position: absolute;
  top: 0;
  left: -170px;
  z-index: 1;
  transition: all .4s ease-in;
}
.showAside {
  left: 0;
}
.container {
  border: 1px solid black;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
  <aside>
    Sidebar goes here
  </aside>
  <div class="container">
    Hello - click to show/hide sidebar
  </div>
</div>

＆＃13;

Answer 2

我已经制作了一些可能有用的Codepen，你可以改变其中的内容和样式并查看。内容容器具有固定的宽度，然后当事物不适合整齐时折叠。我也在这里出现了Sass和HTML。这应该只是一个如何实现它的例子，实际上你可能会因为明显的响应性原因而更好地使用百分比。

http://codepen.io/BlitZ_UK/pen/GrEExr

样式在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>

希望它有所帮助。

侧边栏与Skeleton CSS一起使用

2 个答案: