Question

图像on my website未填充网站包装元素，因此正文显示在底部。我已经尝试弄乱图像上的边距，但我似乎无法让网站包装在没有经过或未完成的情况下进入底部。任何有关如何实现这种效果的提示都将不胜感激。

Answer 1

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

.site-wrap{
   height:100vh;
}

Answer 2

它不漂亮，但您可以通过将padding-bottom: 100%;添加到.site-wrapper

来解决问题

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>

无法使DIV达到页面底部

4 个答案: