CSS 侧边栏定位和横幅

Question

我正在尝试在具有固定高度但使用剩余页面空间的横幅旁边设置一个高度为 100% 的固定宽度侧边栏。我尝试了以下方法，但我似乎无法正确设置横幅的宽度...

提前感谢您的任何见解!

S.

<div id="main">
    <div id="sidebar"></div>
    <div id="banner"></div>
</div>

html, body {
    height: 100%;
}

body {
    padding: 0; 
    margin: 0;
}

div#main {
    width:100%;
    min-height: 100%;
}

div#sidebar {
    float:left;
    position:absolute;
    min-height: 100%;
    width:195px;
    height:100%;
    background-color: rgba(0, 0, 0, 0.8);
}

div#banner {
    position:absolute;
    margin-left:195px;
    top:80%;
    width:100%;
    height:126px;
    background-color: rgba(179, 179, 179, 0.8);
}

已更新截图

下面是我试图用上面的代码完成的，但是横幅占用的空间超过了剩余空间并延伸到页面之外，导致横向滚动。

Answer 1

div#main {
    width:100%;
    min-height: 100%;
    position:relative;
    overflow:hidden;
}

应该可以解决问题。