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

我还用我的代码创建了一个小提琴，由于输出被困在框架内，因此视觉效果有些混乱-但无论如何这里都是 -

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代码即可进行设计。 对于以后想要编辑或更改它的人来说，我不会是地狱。