網站CSS - 左欄不能展開過去滾動窗口

Question

希望我的標題不是太混亂。我有一個網頁，它有一個.main div，旁邊有一個.left div。

當我向.main添加內容時，它將擴展到窗口之外，添加一個滾動條。我的問題是，當我向下滾動.left div的背景不會超過原始窗口高度。

我知道類似的問題已被問了很多次，但我似乎無法將任何解決方案放入我的代碼中。似乎沒有任何工作！

這裏是我 -

CSS

/*Page Setup*/ 
.html {height: 100%;} 
.body {height:100%;} 

.top{ 
    margin-left:200px; 
    text-align:center; 
    color:#b41601; 
    background-color:#F2F2F2 
} 
.left{ 
    position:absolute; 
    top:0; left:0; bottom:0; 
    float:left; 
    width:200px; 
    min-height:100%; 
    background:#b41601; 
} 
.main{ 
    margin-top:10px; 
    margin-left:200px; 
    text-align:center; 
} 

這些div都放置在身體內（很明顯我猜）。在閱讀了一些以前的解決方案後，我將高度CSS添加到了「body」和「html」，但它似乎沒有做任何事情。

由於網站未聯機，向下滾動窗口的圖像。欄上留下開會在100％原始窗口大小

Answer 1

讓您的。左div CSS position: fixed

.left{ 
    position:fixed; 
    top:0; left:0; bottom:0; 
    width:200px; 
    background:#b41601; 
} 

小提琴：https://jsfiddle.net/jldelacruzsantos/qd1rj1LL/

Answer 2

由於position: fixed有時可以作用於手機和平板電腦離奇，此解決方案在top/main中增加了wrap，當它完成時它將滾動rflows，避免在身體上滾動，它的邊距設置爲0。

html, body {height:100%; margin: 0} 
 

 
.wrap{ 
 
    overflow: auto; 
 
    height: 100%; 
 
} 
 
.top{ 
 
    margin-left:200px; 
 
    text-align:center; 
 
    color:#b41601; 
 
    background-color:#F2F2F2 
 
} 
 
.left{ 
 
    position:absolute; 
 
    top:0; left:0; bottom:0; 
 
    width:200px; 
 
    background:#b41601; 
 
} 
 
.main{ 
 
    margin-top:10px; 
 
    margin-left:200px; 
 
    text-align:center; 
 
}

<div class="left">LEFT</div> 
 
<div class="wrap"> 
 
    <div class="top">TOP</div> 
 
    <div class="main"> 
 
    MAIN<br /><br /><br /><br /> 
 
    MAIN<br /><br /><br /><br /> 
 
    MAIN<br /><br /><br /><br /> 
 
    MAIN<br /><br /><br /><br /> 
 
    MAIN<br /><br /><br /><br /> 
 
    MAIN<br /><br /><br /><br /> 
 
    MAIN<br /><br /><br /><br /> 
 
    MAIN<br /><br /><br /><br /> 
 
    MAIN<br /><br /><br /><br /> 
 
    </div> 
 
</div>

Answer 3

你可以有一個包含所有其他的包裝與position: relative

working jsfiddle