Clever Geek Handbook

How do I set the minimum div height to fit the screen?

<!DOCTYPE html>
<html>
<head>
<style>
.banner{
    width:800px;
    height:160px;
    border:1px solid #000000;
}
.main_box{
    width:800px;
    height:300px;
    border:1px solid #000000;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="main_box"></div>
</body>
</html>

Here, when I set the minimum height main_box" to 100%

, nothing happens.

But when I set its height in pixels, the height is visible. I want to set the height of the main_box

div to fit the screen.

Does anyone know how to do this?

+3


source to share


3 answers


Use ( viewport-units ) vh

Size with CSS3 vw and vh units

min-height: 100vh

full code



.banner{
    width:800px;
    height:160px;
    border:1px solid #000000;
}
.main_box{
    width:800px;
    min-height: 100vh;
    height:300px;
    border:1px solid #000000;
    background:red
}
      

        
        
        
      

    
<div class="banner"></div>
<div class="main_box"></div>
Run codeHide result


+4


source


First set of html, body height to 100%



html,body{
    height:100%
}
0


source


try using this css:

<style>
html,body{
    height:100%
}
.banner{
    width:800px;
    height:160px;
    border:1px solid #000000;
}
.main_box{
    width:800px;
    min-height:300px;
    height:75%;
    border:1px solid #000000;
}
</style>
0


source






More articles:


All Articles