Wordpress 响应式设计（高度问题）

Posted 2023-02-19

【中文标题】Wordpress 响应式设计（高度问题）

【英文标题】：Wordpress Responsive Design (height issue)

【发布时间】：2020-03-19 18:26:17

【问题描述】：

我目前正在使用 wordpress 创建一个页面， 我希望页面不允许滚动。我希望它是一个静止页面，可以适应任何显示器的宽度/高度。

但是，我没有做到这一点，而且我当前的设计尝试不断在页面内容下方显示大量空白。

如图：

我知道有可能有一个不滚动的页面（在任何显示尺寸上）并且适合没有任何溢出空白，但我不知道如何解决这个问题，有人能指出我正确的方向吗？我应该采取任何特殊的css方法吗？ （注意，我是使用divi作为页面构建主题）

这是一个网站，它展示了我在不滚动和适合显示方面尝试完成的非常好的示例： Sally King benedict - Contemporary Artist site

【问题讨论】：

你能展示一下你的css是什么样子的吗？或者也许提供该页面的链接。我建议制作一个覆盖页面的渐变背景，并使用固定在页面右下方的图像。

【参考方案1】：

我已经想通了，为了分享知识和信息，我是这样解决的：

问题：我希望页面适合任何屏幕的显示（移动设备、任何尺寸的台式机/笔记本电脑等）。我遇到的问题是，我创建的页面在笔记本电脑的显示屏上看起来不错，但在较大的显示屏上，内容本身下方有大量空白。

修复：我将页面的部分最小高度设为 100% vh。也就是说，页面的最小高度将是视口高度的 100%。在 css 中是这样的：

min-height: 100vh;

现在我的页面在每个显示器上都是全屏的，并且不会溢出滚动条或任何空白。但是，我面临一个新问题（可能遇到同样问题的人），即现在页面上的内容看起来很奇怪，因为它都在顶部，而不是完全居中。您可以采取更多方法来确保内容跟随显示的中心，在此处查看：

CSS tricks - Flexbox

这是我用来确保页面内容居中的所有 css（加上前面解释的代码）：

min-height: 100vh;
display: flex;
flex-direction: column;

同样，我使用的是 Divi，所以我将这个 CSS 放在我的页面（主要元素）的 部分 中。

希望如果有人遇到这个问题，这会帮助你一点，或者至少为你指明正确的方向。