Question

我正在尝试使用带有导航栏和粘性页脚的两个面板进行引导布局。

我希望我的侧边栏的背景颜色一直向下。但是当我的右侧面板有更多内容时，我的左侧面板的背景颜色不会一直到底部。我将导航栏和容器放在div标签内，容器包含右侧和左侧面板。我希望右侧和左侧面板一起滚动，不希望它们有单独的滚动条。我的代码如下所示：

body, html, .row-offcanvas {
    height: 100%;
    overflow: auto;
}
body {
    padding-top: 50px;
}
#sidebar {
    height: 100%;
    min-width: 290px;
    max-width: 220px;
    background-color: #f5f5f5;
    float: left;
    position: relative;
}
#main {
    overflow-x: auto;
}

链接到jsfiddle：http://jsfiddle.net/amirshadaab/ouqda63m/

当m侧边栏的高度为100％时，它不会占用父容器的高度，而是停在中间位置，当我摆脱高度时：100％来自侧边栏，侧面板的背景仅为直到内容结束而不是一直下来。我在这里做错了吗？

Answer 1

它可以正常工作，因为你的包装row-offcanvas高度为100％，可滚动。侧边栏具有相同的高度，但不可滚动。这就是为什么它在你达到它结束之前“结束”的原因。

删除height: 100%然后就可以了。

div元素的高度与100％时父母的高度不匹配

1 个答案: