CSS固定邊欄＆Headbar內容

Question

如何獲得帶有固定邊欄和內容分區的固定頁眉？

我做了什麼至今：

body { 
 
    margin:0; 
 
} 
 
.header { 
 
    width: 100%; 
 
    background: #303030; 
 
    background-repeat: repeat; 
 
    background-size: 38px 133px; 
 
    height: 40px; 
 
    background-position: 0px 39px; 
 
    box-shadow: 0px 1px 5px; 
 
    position: fixed; 
 
    z-index: 1000; 
 
} 
 

 
.sidebar { 
 
    z-index: 100; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 200px; 
 
    background: #303030; 
 
} 
 

 
.content { 
 
    padding: 10px; 
 
    width: 810px; 
 
    margin: auto; 
 
    min-height: 30px; 
 
    box-shadow: 0px 1px 5px; 
 
    background-color: rgba(255,255,255,0.7); 
 
    margin-left: 20%; 
 
}

<div class="header"></div> 
 
<div class="sidebar"></div> 
 
<div class="content"></div>

但此刻它不是穩定的，有點不可思議。意思是說內容分區在我的側邊欄和其他位置上。

有人知道更好更有效的解決方法嗎？

Answer 1

我認爲它會幫助你，爲了你的理解，我爲內容div添加了紅色邊框。只有我改變了CSS。 ​​

body { 
 
    margin:0; 
 
} 
 
.header { 
 
    width: 100%; 
 
    background: #303030; 
 
    background-repeat: repeat; 
 
    background-size: 38px 133px; 
 
    height: 40px; 
 
    background-position: 0px 39px; 
 
    box-shadow: 0px 1px 5px; 
 
    position: fixed; 
 
    z-index: 1000; 
 
} 
 

 
.sidebar { 
 
    z-index: 100; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 200px; 
 
    background: #303030; 
 
} 
 

 
.content { 
 
    position: fixed; 
 
    top: 41px; 
 
    bottom: 0px; 
 
    left: 200px; 
 
    border: 2px solid red; 
 
    right: 0px; 
 
}

<div class="header"></div> 
 
<div class="sidebar"></div> 
 
<div class="content"></div>

Answer 2

有喜歡你的CSS細微的變化：

.content { 
    padding: 10px; 
    width: 810px; 
    min-height: 30px; 
    box-shadow: 0px 1px 5px; 
    background-color: rgba(255,255,255,0.7); 
    margin-left: 200px; 
    margin-top: 40px; 
} 
.header{top:0} 

這將這樣的伎倆。如果不是，請評論。