Question

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

几乎90％的时间iframe内容的高度约为2000px。问题是我的侧边栏完全位于侧面会导致min-height: 100%;仅在加载页面时考虑视口高度。

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

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

我已经帮助证明了我的观点，可以在这里找到：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;

使div始终为视口的100％

2 个答案: