帶側欄的居中內容（無標題）

Question

我想使用側邊欄作爲導航，並將內容集中在用戶屏幕中。我使用側邊欄進行了工作設置，內容位於側邊欄右側和屏幕右側之間，但它讓我感到困擾。我如何擁有一個居中的內容和一個側欄。內容不能在側邊欄下方或上方。在調整大小時，邊欄也不能被內容推出屏幕。不要擔心移動設備，因爲稍後我會用摺疊菜單處理這個問題。 ：P

正如你可以在codepen中看到的那樣，內容是居中的，然而它在邊欄下。 :(我剛剛建立它作爲一個簡單的開始和視覺，任何人誰是有興趣調整的代碼。

這裏是我的Codepen的鏈接。

如果你的基礎它codepen會是很有益的/ jsfiddle的代碼關閉我的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

結帳這個播放清單。 我希望這會幫助你。