контейнер 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

.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

Это происходит потому, что высота свойства не основана на ViewPort.

Вы можете использовать viewport relative lengths или использовать некоторые подходы к высоте видового экрана.

Примеры подходов:

• Вы можете определить 100% на всех элементов по высоте;
• Использовать положение: абсолютное; верх: 0; внизу: 0;

Answer 2

Чтобы избавиться от пространства ниже оранжевой границы, вам нужно указать высоту видового экрана для этого 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 3

Попробуйте использовать:

body, html{ 
    height: 100%; 
} 

Я вижу, что вы используете контейнер жидкости класса, так что вы, вероятно, с помощью начальной загрузки , что также может быть чем-то верным.