Trojan Trojan - 29 days ago 10
CSS Question

container Div is not 100% height in different computer screen?

i have a page consist of html code and css all css are working with fine inside my laptop where i'm developing my page but my problem now is that when i try to run it in another computer(desktop computer) which is much bigger screen the width is ok but the height is not 100% height of the screen. as you can see in the picture there's a border color orange, that is my container div, now below that orange border there's a space and that's my problem.

enter image description here

CSS

body{
background-color: #e9e8e8;
font-family: verdana, geneva, sans-serif;
font-size: 16px;
}

.container-fluid{
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
border: 3px solid orange;
}


this is the image

#slider{
width: 80%;
height: 550px;
margin: 19.5px auto;
-webkit-box-shadow: 0 8px 30px -6px black;
-moz-box-shadow: 0 8px 30px -6px black;
box-shadow: 0 8px 30px -6px black;
overflow: hidden;
}
.items{
max-height: 100%;
height: 550px;
min-width: 100%;
width: 100%;
overflow: hidden;
}
.items img{
width:100%;
height:550px;
}


Footer

.footer{
text-align: center;
-webkit-box-shadow: 0 8px 30px -6px black;
-moz-box-shadow: 0 8px 30px -6px black;
box-shadow: 0 8px 30px -6px black;
background: -moz-linear-gradient(center top, #2ebf16, #217812);
background: -webkit-gradient(linear, left top, left bottom, from(#2ebf16), to(#217812));
background: -o-linear-gradient(top, #2ebf16, #217812);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2ebf16', EndColorStr='#217812');
}

Answer

It's occurs because the property height isn't based on ViewPort.

You can use a viewport relative lengths or use some approaches to Viewport height.

Examples approaches:

  • You can define 100% at all height elements;
  • Use position: absolute; top:0; bottom:0;