当内容小于整页时，拉伸内容div填充屏幕Enjin

Question

我正在为一位朋友创建一个 enjin 网站，并且不能在我的生活中理解如何让这里的页面拉伸以填满整个屏幕垂直如果内容中没有足够的内容可以自行填写。我已经尝试了十几个或更多解决方案的脚本和CSS，无法理解如何做到这一点，因为它不是我的代码，它的恩金，我必须解决它。 / p>

有两个问题的页面，一个是标准格式页面，因此可以对除自定义页面之外的所有页面执行任何操作，并且没有问题，另一页是使用其HTML模块的自定义编码页面。关键是两者都需要相同的解决方案，但它们有不同的代码。

自定义页面：X | 标准页：X

简单地说我在这里要求解决方案。我尝试了flex解决方案，高度100％带块显示，javascript找到底部div底部和显示器​​底部之间的距离，并相应地调整高度等等。似乎没什么用。非常感谢任何帮助。

我可以提供更多必要的详细信息，只需询问。

Answer 1

你不能没有差距，没有内容可以填补它。在某个地方必须有间隙。你的间隙出现在中间，因为页脚是绝对定位的。如果你绝对停止定位你的页脚，页脚将紧贴身体包裹，但是，你仍然会在底部留有空隙，它看起来不会那么糟糕。

.myfooter {
    display: none;
    width: 100%;
    position: relative;
    background-color: RGB(20, 20, 20);
    height: 180px;
    bottom: 0;
}

如果你真的想让它适合屏幕，你可以给出一个最小高度，其计算值为100vh-FooterHeight

Answer 2

position: absolute;
height: 100%;

此问题可能存在其他问题，因为我不知道移动设备或响应式内容如何适用于您的网站，但这是一种方式。你正在将BG div与内容div联系起来 - 这就是你看到这种行为的原因 - 你需要让BG成为内容的兄弟内容而不是父子关系，然后你可以更灵活地使用它 - 但对于现在我的选择似乎有效

Answer 3

你要完成的是两件事。首先，您要使div #memberContainer始终至少与用户屏幕一样高，而不是页脚的高度。

使用＆＃34; vh＆＃34;可以使用css完成此操作。单元。 vh单位的定义如下：

  

相对于视口高度的1％*

calc function，因为您需要从页脚高度（180px）中减去100vh（屏幕高度）。

因此您需要将此代码添加到#memberContainer。

#memberContainer{min-height: calc(100vh - 180px)}

您需要做的第二件事是确保#memberBlock的背景图像始终覆盖屏幕的整个可见部分。

图像本身为1920 * 1080，这是标准的16：9分辨率。假设你只想要以16：9的屏幕为目标，这样可以正常工作。但是，为了覆盖手机和所有其他屏幕，我建议您使用：

#memberBlock{background-size:cover}

这可确保图像始终覆盖屏幕。