容器Div在不同的电脑屏幕上不是100％的高度？

Question

我有一个由html代码和css组成的页面所有css都在我的笔记本电脑里正常工作，我正在开发我的页面但我现在的问题是当我尝试在另一台计算机（台式计算机）中运行它时这是一个更大的屏幕，宽度可以，但高度不是屏幕的100％高度。正如你在图片中看到的那样，边框颜色为橙色，这是我的容器div，现在在橙色边框下面有一个空格，这就是我的问题。

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;
}

这是图片

#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{
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 1

要摆脱橙色边框下方的空间，您需要为该div指定视口高度。像这样

div.container {
 height: 100vh; // This does the trick
 width: 100%;
 border: 2px solid #FF0000;
}

您可以在此处详细了解vh，https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Answer 2

尝试使用：

body, html{
    height: 100%;
}

我看到你正在使用容器流体类，所以你可能正在使用bootstrap，这也可能会超越某些东西。

Answer 3

这是因为属性高度不是基于ViewPort。

您可以使用viewport relative lengths或使用某些方法来查看视口高度。

示例方法：

• 您可以在所有高度元素上定义100％;
• 使用位置：绝对;顶部：0;底部：0;