0

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

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

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

我已将侧边栏和所有父母设置为 height:100%，包括 html：

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

我一直在努力在 jsfiddle 中获得这个演示，但无法让它工作。这是我的样子：

在此处输入图像描述

4

2 回答 2

2

您可以使用 css 表来实现这一点。

小提琴 1 小提琴2

标记

<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;   
}
于 2013-07-14T18:57:24.873 回答
2

假列是您问题的常用 CSS 模式：http: //line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

于 2013-07-14T19:03:22.757 回答