高度（最小高度）100％在內容溢出時不起作用？

Question

我正在建立一個3列布局的網站。 header將固定在頂部， nav將固定在左側。 然后包裝器將包含main和aside 。 我想要的是主包裝，放在一邊可以填充包裝紙的高度。

這是我的CSS。 您還可以看到我的jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/

* {
    margin: 0;
    padding: 0;    
}

html, body {
    width: 100%;
    height: 100%;
}

.header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    z-index: 9;
    background: red;
}

.nav {
    width: 20%;
    height: 100%;
    position: fixed;
    top: 100px;
    left: 0;
    background: green;
}

.wrapper {
    width: 80%;
    min-height: 100%;
    margin-top: 100px;
    margin-left: 20%;
    position: relative;
}

.main {
    width: 70%;
    min-height: 100%;
    position: absolute;
    left: 0;
    background: black;
}

.aside {
    width: 30%;
    min-height: 100%;
    position: absolute;
    right: 0;
    background: blue;
}

.u-color-white {
    color: white;
}

看來他們可以運作良好。 但是，當內容的main高度或aside高度超過其自身高度時，它將無法正常工作。 我不知道該如何解決。

誰能幫我？ 謝謝！

Answer 1

您的布局非常嚴格。 一切都是固定的..如果您需要將標題從100px高度更改為120怎么辦？ 您將不得不在許多不同的地方進行相應的更改。

這是您的布局的純CSS解決方案，無需固定任何高度或寬度。 （如果需要，可以固定高度或寬度）。此布局完全響應，並且跨瀏覽器。

如果您不固定元素的高度/寬度，它們將完全滿足它們的需求。

這是一個工作小提琴

HTML：

<header class="Header"></header>
<div class="HeightTaker">
    <div class="Wrapper">
        <nav class="Nav"></nav>
        <div class="ContentArea">
            <div class="Table">
                <div class="Main"></div>
                <div class="Aside"></div>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
body:before {
    content:'';
    height: 100%;
    float: left;
}
.Header {
    height: 100px;
    /*No need to fix it*/
    background-color: red;
}
.HeightTaker {
    position: relative;
}
.HeightTaker:after {
    content:'';
    display: block;
    clear: both;
}
.Wrapper {
    position: absolute;
    width: 100%;
    height:100%;
}
.Nav {
    height: 100%;
    float: left;
    background-color: green;
}
.ContentArea {
    overflow: auto;
    height: 100%;
}
.Table {
    display: table;
    width: 100%;
    height: 100%;
}
.Main {
    width: 70%;
    /*No need to fix it*/
    background-color: black;
    display: table-cell;
}
.Aside {
    width: 30%;
    /*No need to fix it*/
    background-color: black;
    display: table-cell;
    background-color: blue;
}
.u-color-white {
    color: white;
}

Answer 2

這是一個很常見的問題。 我建議您使用包裝的背景圖像，使其看起來像最小高度為100％，或者使用此網站上的方法： http : //css-tricks.com/fluid-width-equal-height -列/

Answer 3

只是看這個小提琴...。希望這就是你想要的...

.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;

}

http://jsfiddle.net/h8r2z/6/