边栏连同骨架CSS

Question

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

https://jsfiddle.net/dgujg9xb/

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

通过给它的负缘，我可以浮动它的容器是内部（#holder）的外部。但是，这是非常糟糕的，并不能很好地发挥作用。通过调整屏幕大小，我希望边栏剪切，以便它位于顶部（如使用媒体查询的手机上），但这似乎不可能。

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

Answer 1

制作边栏absolute并将其与其余布局独立并在z-index之上。

• 注意我评论960pxwidth从#holder只是为了演示（摘录自视是小否则它将溢出），还增加了侧边栏的jQuery切换为同一目的。

你的小提琴：

我的小提琴：

External Fiddle if you wish to resize

摘录如下：

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

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

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

Answer 2

我已经做了一些可能有用的Codepen，你可以在那里改变内容和样式并看看。内容容器具有固定的宽度，然后在事物不整齐时折叠。我也在这里弹出了Sass和HTML。这应该是一个如何实现的例子，但实际情况下，为了显而易见的响应原因，使用百分比可能会更好。

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

的造型在萨斯完成的;

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

希望它有帮助。