使div始终占视口的100%

Question

基本上我有一个侧列和一个主列。侧栏包含一些导航图标，主栏将有一个iframe。

几乎90%的时候iframe内容的高度都在2000px左右。问题是，让我的侧边栏绝对放在一边会导致min-height: 100%;在加载页面时只考虑视口高度。

当你向下滚动页面查看所有主要内容时，一旦你点击侧边栏的末尾，它就会被切断。这看起来很可怕，我想知道我遇到的问题是否有PURE CSS的解决方案？我只需要制作一个带有深灰色条和repeat-y的背景图像，但我只是想看看是否有其他解决方案。

我不想使用position: fixed;的原因是，有时侧边栏菜单的高度会改变，这意味着我可能需要用户能够使用页面滚动来查看其他选项。

我制作了一个jsfiddle来帮助证明我的观点，可以在这里找到：http://jsfiddle.net/kKjBY/1/

我的HTML

<div class="wrapper">
    <div id="main_content" class="large">
            <p>Main content</p>
        </div>
        <div id="sidebar">
            <ul class="sidebar_nav">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
</div>

我的CSS

#sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  min-height: 100%;
  background: #323232;
  color: #fff;
}
#main_content{
    padding-left: 80px;    
    height: 3000px; /* stricly to demonstrate */
}
#sidebar ul{ 
    margin: 0;
    padding: 0;
}
#sidebar li {
  list-style: none;
  width: 60px;
  height: 60px;
  text-align: center;
}

Answer 1

将position:relative;添加到包装器div，将bottom:0;添加到侧边栏。

查看更新后的小提琴：http://jsfiddle.net/W725c/1/

Answer 2

div需要是

top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;

然后，它将停留在视口的尺寸内，并随着滚动条"移动"。

我在这里输入代码，如果样式为，它将只覆盖整个视口

边距：0；填充：0；