html - 使 div 始终占视口(viewport)的 100%

Question

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

几乎 90% 的情况下，iframe 内容的高度都在 2000 像素左右。问题是，将我的侧边栏绝对定位到一侧会导致 min-height: 100%; 在加载页面时仅考虑视口(viewport)高度。

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

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

我制作了一个 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; 添加到侧边栏。

查看更新的 fiddle :http://jsfiddle.net/W725c/1/