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

我正在構建3列布局網站。 header將固定在頂部，並且nav將固定在左側。然後包裝將包含main和aside。我想要的是主要和旁邊可以填充包裝的高度。高度（最小高度）內容溢出時100％不工作？

這是我的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以上時，它將不起作用。我不知道如何解決它。

任何人都可以幫助我嗎？ Thx！

來源

2013-10-12 user2331095

@codedude但我不喜歡他的解決辦法......我想有可能是一個更優雅的解決方案 – user2331095

同意。刪除了我可能的重複評論。 – codedude

你有一個非常嚴格的佈局。一切都是固定的。如果您需要將標題從100px高度更改爲120，該怎麼辦？你必須在很多不同的地方相應地改變它。

這是一個用於佈局的純CSS解決方案，無需固定任何高度或寬度。（如果你願意，你可以修改高度或寬度）這個佈局完全響應，並且跨瀏覽器。

如果您不修復元素的高度/寬度，它們將精確地跨越他們所需的範圍。

這裏有一個Working Fiddle

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

來源

2013-10-12 19:22:09 avrahamcool

事實上，我使用的是SASS，大部分東西都是變量:-) – user2331095

看來你正在使用'display：table'和'display：table-cell'來解決我的問題嗎？ – user2331095

哦，SASS很好。事實上，同等高度的解決方案是使用CSS表格佈局。 – avrahamcool

這是一個很常見的問題。我建議要麼有一個包裝的背景圖像，使它看起來像一邊有100％的最小高度或使用該網站的方法： http://css-tricks.com/fluid-width-equal-height-columns/

來源

2013-10-12 16:26:45 codedude

這是一個非常棒的資源。謝謝:-) – user2331095

接受答案或至少投票表示讚賞。：D – codedude

贊成，我喜歡@avrahamcool的回答，並接受它。不管怎麼說，還是要謝謝你！ – user2331095

只是看到這個小提琴....希望這是你想要什麼？

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

}

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

來源

2013-10-12 17:12:36 akshaymanerikar

在我問這個問題之前，我知道'position：fixed'會起作用。但這不是我想要的。因爲'旁邊'不應該修復..謝謝你！ – user2331095

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

回答

相關問題