邊欄連同骨架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> 

希望它有幫助。