Html 使div始终占据视口的100%

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

几乎90%的时间iframe内容的高度都在2000px左右。问题是，将侧边栏绝对放置在一侧会导致

min height:100%

在加载页面时仅考虑视口高度

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

repeat-y

，但是我只是想看看是否还有其他解决方案

我不想使用

位置的原因：已修复

是指侧边栏菜单的高度有时会改变，这意味着我可能需要用户能够使用页面滚动查看其他选项

我制作了一个JSFIDLE来帮助演示我的观点，可以在这里找到：

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

这个部门需要

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

然后，它将停留在视口的尺寸范围内，并使用滚动条“移动”

我在这里输入代码，如果样式设置为

保证金：0； 填充：0

该div需要

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

然后，它将停留在视口的尺寸范围内，并使用滚动条“移动”

我在这里输入代码，如果样式设置为

保证金：0；

---

填充：0

添加

位置：相对到包装器div和
底部：0到侧边栏

查看更新的小提琴：
添加
位置：相对到包装器div和
底部：0到侧边栏

看到最新的小提琴：
哦，哇，真不敢相信我错过了这把。。我觉得自己很愚蠢。非常感谢你！哇，真不敢相信我错过了这个。。我觉得自己很愚蠢。非常感谢你！