サイドバーとスケルトンCSS

Question

サイドバーを960px幅スケルトンコンテナのすぐ隣に配置しようとしています。私はそれを成功させましたが、コンテナを画面の中央に維持しながら、をより良い方法で探しています。それに負のマージンを与えることによって

https://jsfiddle.net/dgujg9xb/

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

、私はそれが内部で容器（#holder）外に浮遊することができます。しかし、それは非常に悪く、うまく機能しません。画面のサイズを変更することで、サイドバーを切り取って代わりに（メディアクエリを使用する電話のように）上に置いてもらいたいが、これは不可能なようだ。

これを構成するより良い方法はありますか？私は非常にうまく動作する限り、JavaScriptライブラリを使用しています。

Answer 1

サイドバーをabsoluteにして、レイアウトの残りの部分から独立して上に置きます（z-index）。

• 注Iはまた、同じ目的のためにサイドバーjQueryのトグルを追加し、（スニペットビューポートが小さいので、それはそうでなければオーバーフローする）だけデモンストレーション#holderから960pxwidthコメント。

あなたのフィドル：

マイフィドル：

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

私は使用できるかもしれない何かのコデペーンを作っています。あなたはその中のコンテンツとスタイリングを変更して見ることができます。コンテンツコンテナの幅は固定されていますが、物がきちんと収まらない場合は折りたたまれます。私はここでも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> 

はそれが助け願っています。