Question

我有一个内容包含在<html></html>中的页面 - 我正试图让一个侧边栏一直延伸到页面底部，即使有垂直溢出。

如果没有垂直溢出，这是有效的，但是如果有，侧边栏只会在页面加载页面的任何位置停止。

如果我使用chrome dev工具，我可以看到所有元素 - 一直到<html>，其高度限制为加载时窗口的大小。这是正常的吗？如果我可以告诉<html>以某种方式垂直跨越以包含所有内容，我的问题就会得到解决，但我不知道这是否是正确的解决方案。

我已将侧边栏和所有父母设置为高度：100％，包括html：

html, body, .durandal-wrapper, #shell-row, #sidebar {
    height: 100% !important;
}

我一直在努力在jsfiddle中获得这个demod但是无法让它工作。这就是我的结局：

enter image description here

Answer 1

您可以使用css表来实现此目的。

FIDDLE1 FIDDLE2

标记

<div class="container">
    <div class="sideBar">sideBar</div>
    <div class="main">
        Content.
    </div>
</div>

CSS

.container
{
    display: table;
}
.sideBar
{
    display: table-cell;
    background:pink;
    width: 100px;
}
.main
{
    display: table-cell;
    background:yellow;
    overflow:auto;
    vertical-align: top;   
}

Answer 2

Faux columns是您常见的CSS模式： http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

高度100％不包括y溢出内容？

2 个答案:

标记

CSS