サイドバー付き（ヘッダーなし）

Question

ナビゲーションとしてサイドバーを使用し、コンテンツをユーザーの画面の中央に配置したいと考えています。私はサイドバー付きの設定をしていましたが、コンテンツはサイドバーの右側と画面の右側の中央に配置されていましたが、それは私を悩ませていました。どのように私は中心のコンテンツとサイドバーを持つことができます。コンテンツがサイドバーの下または上に移動できないようにする必要があります。サイズ変更時には、コンテンツによってサイドバーを画面から押し出すこともできません。私は後で崩壊するメニューでそれを扱うので、モバイルについては心配しないでください。 ：P

コードペーンのように、コンテンツは中央に表示されますが、サイドバーの下に表示されます。あなたはcodepenをベース場合:(私は、コードを微調整に興味がある人のために、簡単なスタートとビジュアルとしてそれを建てた。

ここに私のCodepenへのリンクです。

それは/本当に参考になりますありがとう！:)どんな助力も大変ありがとうございます。事前に感謝しています。

HTML：

<div class="site-header"> 

<ul class="main-navigation"><a href="#">Overview</a> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 
<div class="content">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 

CSS：

.content { 
    position: relative; 
    float: right; 
    border: 1px solid yellow; 
    word-wrap: break-word; 
    white-space: normal; 
    margin: auto; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
} 

.site-header { 
    padding: 1em; 
    display: inline-block; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: 12%; 
    height: 100%; 
    float: left; 
    text-align: right; 
    position: fixed; 
    overflow: hidden; 
    z-index: 1; 
    border: 1px solid green; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    // background-color: blue; 
} 

.main-navigation { 
    position: absolute; 
    bottom: 40px; 
    right: 0; 
    cursor: default; 
    // border: 1px solid red; 
    list-style-type: none; 
    -webkit-margin-before: 0; 
    -webkit-margin-after: 0; 
    -webkit-margin-start: 0; 
    -webkit-margin-end: 0; 
    -webkit-padding-start: 0; 
} 

Answer 1

あなたは90のようなものの内容の割合幅、サイドバー上の10％の幅を設定することができます。

.content{ 
    border: 1px solid red; 
    width: 90%; 
} 
.site-header{ 
    width: 10%; 
    border: 1px solid green; 
} 

あなたが望むものを理解すれば、ここにはjsfiddleがあります。 https://jsfiddle.net/49t0kspp/

Answer 2

https://www.youtube.com/playlist?list=PLqGj3iMvMa4L731ispRfGAabXeRpM4RL6

このプレイリストをチェックアウト。 これがあなたを助けてくれることを願っています。