0

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

几乎 90% 的时间 iframe 内容的高度约为 2000 像素。问题是让我的侧边栏绝对定位在一边会导致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;
}
4

2 回答 2

3

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

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

于 2013-08-19T09:30:21.443 回答
0

div 必须是

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

然后它将保持在视口的尺寸内并随着滚动条“移动”。

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

边距：0；填充：0；

于 2013-08-19T09:29:35.983 回答