當div無法放入視口時，將div保持在全高

Question

我的目標是一個居中的內容包裝，它可以隨時擴展到頁面的整個高度。到目前爲止，如果所有內容都適合視口，我的CSS就可以工作，但是如果不是，則div在初始視口高度後停止。

html, body { 
    height:100%; 
} 

div { 
    position: relative; 
    width: 200px; 
    height: 100%; 
    margin: 0 auto 0 auto; 
    background-color: #FAA 
} 

演示1：https://jsfiddle.net/86j3qshr/1/

如果你離開了，在div標籤的重量屬性，那麼它的工作原理，只要內容溢出口​​中。否則，div不是全視口高度。

演示2：https://jsfiddle.net/86j3qshr/2/

Answer 1

使用min-height屬性，而不是height財產。

當您在具有背景的元素上設置height: 100%時，它將具有父元素的高度100%。由於父元素的高度等於視口的高度，因此無法按預期工作。由於您不希望元素的最大值height與視口相同，因此min-height的效果會更好。

Updated Example

div { 
    position: relative; 
    width: 200px; 
    min-height: 100%; 
    margin: 0 auto; 
} 

作爲一個側面說明，你也可以使用viewport-percentage units：

Example Here

div { 
    position: relative; 
    width: 200px; 
    min-height: 100vh; 
    margin: 0 auto; 
}