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

我试图使用两个导航栏和粘滞页脚的面板制作引导程序布局。div元素的高度与100％时不匹配父级的高度

我希望我的边栏具有一路向下的背景色。但是当我的右侧面板有更多的内容时，我的左侧面板的背景颜色不会一直走到底部。我的导航栏和容器放置在一个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％从侧边栏，我的侧面板的背景只是直到内容结束，并没有完全下降。我在这里做错了什么？

来源

2014-10-01 Amir Shadaab Mohammed

'min-height：100％;'？ - http://jsfiddle.net/L7rrmyfw/ – Anonymous 2014-10-01 17:05:41

最小高度：100％与高度相同：100％。它不会将背景颜色一直放在底部。 – 2014-10-01 17:08:16

试试这个 - http://jsfiddle.net/w6zppc65/ – Anonymous 2014-10-01 17:58:59

它的工作原理是，因为你的包装row-offcanvas是100％的高度和可滚动。边栏采用相同的高度，但不可滚动。这就是为什么它在达到目的之前“结束”。

删除height: 100%它的工作原理。

来源

2014-10-01 17:05:57 TheFrozenOne

背景不会一直走到底部。我如何让它一直到底部填充包装？ – 2014-10-01 17:07:15

@StreetSoldier使用'min-height：100％'而不是'height：100％' – Pointy 2014-10-01 17:07:38

请参阅我的编辑：删除高度100％; – TheFrozenOne 2014-10-01 17:07:50

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

回答

相关问题