Question

这就是边栏在其旁边的样子。开始阶段：http://i.imgur.com/RE1bFdt.png

内容符合原始页面大小时没有问题：http://i.imgur.com/gWZNUOo.png

但是，一旦将列放在彼此之下，侧边栏高度保持不变，底部留空空间：http://i.imgur.com/lKY8L94.png

侧边栏位于包裹内：

#wrap {width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0}
.sidebar {width: 200px; height: 100%; float: left; background: #65A973; position: relative; bottom: 0px}

一些HTML

    <div id='wrap'>
        <div class='sideBar'>
           //something goes here 
        </div>
        <div id='content'>
           //something goes here 
        </div>
        <div class='clear'></div>
    </div>

Answer 1

添加这些属性。

.sidebar{
  width: 200px;
  height: 100%;
  position:fixed;
  display:block;
  top: 0;
  }

Answer 2

这将我的评论正式化为答案：

我建议将position:fixed;用于侧边栏的以下CSS：

#sidebar {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:[some width];
}

现在确保增加其余内容的保证金，使它们不会消失在侧边栏后面：

#contents {
    margin-left:[sidebar width + normal margin];
}

请注意，您现在无法再在侧边栏内滚动，但滚动页面的其余部分仍保持不变。

Answer 3

当右列很高时，您希望可以扩展100％高度的列。您遇到此问题，因为您的100％高度是指视口而不是真正的DIV高度

您只能在左栏中使用position:absolute来实现此目的（使用填充内容进行正确对齐）

https://jsfiddle.net/2zes2ewL/

侧边栏高度不随内容高度一起变化

3 个答案: