CSS身體100％高度和必要時溢出

我知道如何確保HTML主體垂直拉伸/收縮到瀏覽器視口的100％高度（通過在身體和html規則中具有100％高度）。CSS身體100％高度和必要時溢出

我也知道正常的HTML流將導致容器垂直拉伸以包含其內容（如果事情設置正確）。

然而，我似乎無法實現這兩個。

即我無法擊敗CSS，以確保在高分辨率屏幕上查看我的頁面時，它會垂直延伸以留下空白，並確保在低分辨率屏幕上查看我的頁面，以使主體伸過視口（以適應所有內容）並介紹滾動條。

對我來說，這是理想的行爲，但我不幸相信，這不能純粹在CSS中實現。我知道我可以很容易地用JavaScript來做到這一點，但我希望能夠在CSS中做到這一點。

這是可能的，還是我被迫使用JavaScript？

編輯：我已經研究，試驗和測試這麼多的技術，但它只是看起來像它無法做到的。看起來我將不得不回到JavaScript。

來源

2013-12-12 pleasedesktop

行，所以這肯定工程me：

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    display: flex; 
} 

#wrapper { 
    width: 100%; /* Necessary because of side-effect of flex */ 
    height: 100%; 
}

正是我之前所嘗試的，但我想我會給這個新的CSS功能「彎曲」去，它已經做到了。所以看起來，CSS經理/創作者終於用動態高度和垂直居中來解決這些關鍵問題。

我希望這可以幫助別人卡住這個問題。

來源

2013-12-13 11:21:06 pleasedesktop

您可以使用min-height css屬性。

html, body { 
    min-height: 100%; 
}

來源

2013-12-12 12:26:45 Tibos

這似乎將html實體拉伸到視口的大小（好），但不幸的是身體不舒展。我試圖使HTML有最小高度100％和身體100％，但是這給出了相同的結果。 – pleasedesktop

min-height: 100%; /* other browsers */ 
height: auto !important; /* other browsers */ 
height: 100%; /* IE6: treated as min-height*/

來源

2013-12-12 12:33:30

我應該使用哪些規則/元素？我嘗試了HTML本身和html和body;似乎都不起作用。 – pleasedesktop

您需要使用HTML，正文 –

正如我所說，我試過， – pleasedesktop

從一個問題，這似乎是幾乎和我一樣獲得靈感：Make body have 100% of the browser height

這是爲我工作：

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
}

來源

2013-12-13 05:00:59 pleasedesktop

這也不起作用，因爲然後身體內的容器不能通過百分比高度垂直拉伸，因爲CSS指出，只有父母有一個固定高度（即身體不能有最小高度，但需要身高）。所以......回到原點。 – pleasedesktop

CSS身體100％高度和必要時溢出

回答

相關問題