Невозможно сделать DIV в нижней части страницы.

Question

Изображение on my website не заполняет элемент обертки сайта, поэтому тело отображается внизу. Я попытался возиться с полями на изображении, но, похоже, я не могу заставить сайт обходить снизу, не пройдя мимо или не дойдя до конца. Любые советы о том, как добиться этого эффекта, будут очень признательны.

Answer 1

Используйте vh блок (который является относительно высоты видового экрана), но вы, возможно, потребуется удалить paddding от дна.

.site-wrap{ 
    height:100vh; 
} 

Answer 2

Это не красиво, но вы можете решить эту проблему путем добавления padding-bottom: 100%; к .Выходной-обертке

Answer 3

Нельзя сказать, что это обязательно лучшее решение, но с верхней частью моей головы, вы могли бы добавить следующее:

.site-wrap { 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    position: absolute; 
    box-sizing: border-box; 
} 

Answer 4

вы используете JavaScript, чтобы соответствовать высоте экрана:

<script> 

// GET THE HEIGHT OF THE SCREEN 
var body = document.body, 
    html = document.documentElement; 
var height = Math.max(body.scrollHeight, body.offsetHeight, 
         html.clientHeight, html.scrollHeight, html.offsetHeight); 

// GET THE DIV BY CLASS 
var sitWrap = document.getElementsByClassName("site-wrap")[0]; 

// SET ITS HEIGHT 
sitWrap.style.height = height + "px"; 

// REMOVE THE PADDING SET IN YOUR STYLE 
sitWrap.style.padding = "0px"; 


</script>