Why does css setting min-height to body have no effect?

When there is very little content in the content area of ​​the web page, the footer will come to the top?
I set min-height: 100%; for body and html, it has no effect.
Setting height: 100%; is fine, but if there is too much content, it will fit on one screen?

body,html{   min-height:100%;
}body{   position:relative;
}.content{  podding-bottom:100px;
}.footer{position:absolute;bottom:0;left:0;height:100px;
}

Write like this:

html {    
height: 100%;
}
body {    
position: relative;    
min-height: 100%;   
 box-sizing: border-box;    
 padding-bottom: 80px; /* .footer 的高度，为 footer 占位 */}
 .footer {    
 position: absolute;    
 bottom: 0;    
 left: 0;    
 width: 100%;    
 height: 80px;
}

The above code is compatible with IE8 and above

I have also encountered such a problem, and I solved it like this:

html,body，.content{    
min-height:100%;
}
html{    
-ms-text-size-adjust: 100%;    
-webkit-text-size-adjust: 100%;
}
body{    
background:#eeeeee;
}

Then use js control to make $(".content").height($("html").height); I feel that this adjustment is more reliable

100% based on its parent Elements are used for comparison. For example,

<div style="width:100px;">
    <div style = "width:50%;"></div>
</div>

Back to the original poster’s question, so html can only set a fixed height. If you want to set the body height percentage, then you set the height of the html element first!

The above is the detailed content of Why does css setting min-height to body have no effect?. For more information, please follow other related articles on the PHP Chinese website!