Menu
<!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 min-height of main_box" to 100% nothing happens.
But when I set it's height in pixels, the height is visible. I want to set the height of main_box div to fit the screen.
Does anyone know how to do it?
476
Easiest way to center something regardless of page width is margin: auto; in your CSS, with height and width defined. Show activity on this post. This will center your DIV with class center-div horizontally AND vertically. The margin-left must be negative half of what your width is.
A simple way to solve this is to use the viewport percentage unit vh instead of %. One vh is defined as being equal to 1% of a viewport's height. As such, if you want to specify that something is 100% of the latter, use " height: 100vh ". Or if you want to make it half the height of the viewport, say " height: 50vh ".
Min height 100vh means the element should occupy the web browser viewport height. This is always 100 percent of the web browser's viewport height. If there is more content, the element will stretch more than the viewport's height, which is a code example that will clear things up.
Use (viewport-units) vh Sizing with CSS3's 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
