网站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

制作.left div css position: fixed

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

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

Answer 2

你可以使用{{1}}

包含所有其余的包装器

working jsfiddle

Answer 3

由于wrap有时会对手机和平板电脑产生古怪的影响，因此此解决方案向top / main添加了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; }，当它溢出时会滚动，并且为了避免身体上的滚动，其边距设置为0.

＆＃13;

＆＃13;

<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>

＆＃13;

LFSparams

＆＃13;

＆＃13;

＆＃13;