如何與瀏覽器的高度的背景100％DIV沒有任何內容或較少內容

我有一個代碼如何與瀏覽器的高度的背景100％DIV沒有任何內容或較少內容

<html> 
    <head></head> 
    <body> 
    <div id="main"> Hello world.!</div> 
    </body> 
</html>

和CSS

body{ 
    background-color: black; 
} 

#main{ 
    padding: 10px; 
    background-color: blue; 
}

請幫助我有100％高度的背景。尋找jsfiddle鏈接。

來源

2015-01-09 Nandish Majjagi

爲什麼不直接在body上設置'background-color'爲'blue'呢？ –

只需把身體的高度做成100％。然後你的主要元素也是100％。 – Vijay

，如果你想設置的藍色div的高度，然後添加此

body { 
 
    background-color: black; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
} 
 
#main { 
 
    min-height: 100%; /** set height 100% if content is smaller **/ 
 
    height: auto; /** if the content is larger than **/ 
 
} 
 
#main { 
 
    padding: 10px; 
 
    background-color: blue; 
 
}

<div id="main">Hello world.! 
 
</div>

來源

2015-01-09 06:33:22

此代碼不是動態的，並且在內容高於窗口高度時失敗。 http://jsfiddle.net/tk6hvzs4/ –

.center-element { 
    min-height: 100%; 
    min-height: 50vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    -ms-flex-direction: column; 
    flex-direction: column; 
}

來源

2015-01-09 06:35:19

CSS3中可以使用的VH至極我已經明白表示視口的高度。即100Vh意味着視口高度的100％。

身高：100vh;

來源

2015-01-09 07:08:48 trevligheten

我肯定會推薦你看看這個帖子：Make div 100% height of browser window

這裏解釋不只是如何做到這一點，也100%和100vh之間的差異。

對於額外的知識真的很好:-)

來源

2015-01-09 08:41:25

如何與瀏覽器的高度的背景100％DIV沒有任何內容或較少內容

回答

相關問題