侧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;
}

我也用我的代码创建了一个小提琴，视觉有点乱，因为输出被困在一个框架内 - 但是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代码就可以完成你的设计。对于任何想要在以后阶段编辑或改变它的人来说，我都不会下地狱。