側面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代碼即可進行設計。 對於以后想要編輯或更改它的人來說，我不會是地獄。