Geek asks and answers

The baby element of the body does not accept 100% of the space when the body has a minimum height of 100%

The following code is working correctly

<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  height: 100%; /* !!!!! difference in here */
}
div#main {
  min-height: 100%;
  background-color: red;
}
</style>
</head>
<body>
    <div id="main"></div>
</body>

while code using min-heightinstead heightfor body prevents #main from taking up space

<!DOCTYPE html>
<html>
<head>
<title>Not working</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  min-height: 100%; /* !!!!! difference in here */
}
div#main {
  min-height: 100%;
  background-color: red;
}
</style>
</head>
<body>
    <div id="main"></div>
</body>

It is strange when you do an inspection in chrome, in both cases the body properly occupies 100% of the space. In the case of a min-heightchild, it min-height: 100%;translates to 0. Why is this happening and is there any workaround? I would like the minimum height for my web page to allow the background to work correctly and expand as needed.

+3
source share
2 answers

As for "Why is this happening?"

min-height , ​​ . :

. . (.. ), , "0" ( "min-height" ) "none" ( "max-height" ).

, " (.. ). " body min-height, , ( , 100% html, ). , body , , div#main min-height, body .

" "?

, body height: 100% , . .

html background-color

html background-color - ( ). , html canvas :

, ( "background-position" ) , . .

HTML , BODY, HTML. , HTML "HTML" XHTML "html", "transparent" "background-color" "none" "background-image", HTML "BODY" "body" XHTML, . , .

+5

&nbsp; <div id="main"/>.

-1
source

More articles:


All Articles