侧面 DIV 高度未延伸 100%

Question

我的布局有一个侧面菜单栏，然后主要内容显示在右侧。除了一个小细节外，布局和功能都很好 -

在某些情况下，没有足够的内容来填满整个屏幕，当发生这种情况时，包含主要内容的 DIV 不会拉伸并填满屏幕的其余部分，从而造成视觉差异，如截屏。我尝试操纵各种属性并放入虚拟内容等，但找不到干净的解决方案。我希望有人能提供帮助。我正在使用 Twitter Bootstrap 3.x

我已经为主要部分添加了 CSS，理想情况下，我希望这个白色背景填满屏幕直至页脚。

/*
 * Main content
 */

.main {
    padding: 20px;
    background-color: #fff;
    border-left: 1px solid #dae3e9;
    height: 100%;
    box-shadow: -3px 3px 3px -2px #f1f1f3;
}

我还用我的代码创建了一个 fiddle，视觉效果有点乱，因为输出被困在一个框架内 - 但无论如何 here it is -

Answer 1

不要使用min-width: 100%；在你的#wrap 上。基本解决问题

但我希望页脚仍然在底部等等... Fiddle

已添加：

.main::before {
    content: "";
    position: absolute;
    z-index:-1;
    display: block;
    width: 100%;
    margin-left: -20px;
    height: 100vh;
    border: 1px solid black;
    background-color:white;
}

建议：清理你的代码。你不需要那么多 html 代码来设计你所做的。对于任何想在后期编辑或更改它的人来说，我都不会是地狱。

侧面 DIV 高度未延伸 100%

Side DIV not extending 100% in height

html

css

twitter-bootstrap-3