使用vh单位（相对于视口高度），但可能需要从底部移除填充。

.site-wrap{
   height:100vh;
}

这并不漂亮，但是可以通过向.site-wrapper添加padding-bottom: 100%;来解决这个问题

不能说这一定是最好的解决方案，但在我的脑海中，你可以加上一句：

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

你使用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>