jquery - 响应式网站和高度的问题

Question

当您打开我的网站时，它会响应（未完成）。从宽度调整大小时，一切正常。但是当开始移动高度时，一切都开始看起来不对劲。因为我在 div 上设置了 100% 的高度。

在手机上查看时，您会看到顶部的地址栏。假设它的高度是 10%，我的网站高度将是 90%。但是当我向下滚动并且栏消失时，高度会自动调整。有解决办法吗？

我对此还不是很感兴趣。你能帮我么？

Answer 1

我认为您应该再阅读一次有关 RWD 布局的内容。你有一些基本的错误（就像每个新秀一样，我过去也犯过）。例如，您将#Contact 定义为 100% 高度，但在其中形成始终为 500px 高度。这会产生一些小故障 - 例如，假设您在只有 300 像素高度的设备上打开它 - 您的 div 将获得 300 像素，但您说表单需要至少为 500，因此它会高于其父级。这意味着如果您对父母使用 % 或 ems 或其他相对单位，您也应该为它的孩子使用它。

我还在第 558 行的 CSS 中发现了一些破坏代码的内容：

评论它并测试是否正常工作。

header nav {
   width: 450px;
}

它会在宽度方面在某个点制动 manu 内容。

此外，我发现您过度使用 id 很难对网站进行任何更改。基本上每个具有您背景的 div 都应该具有相同的类，您可以在其中定义这些 div 共有的最小高度、边距和其他 CSS 属性。我建议你阅读这篇文章。基本上，您的 DIVS 的 CSS 可能如下所示：

div.section_container {
    min-width:100%;    
    min-height:100%;
    margin:0;
}

现在，如果您需要更改部分 div 的尺寸，您只需在一个地方进行更改。

Answer 2

我想你必须改变一些结构性的东西。您的浮动元素（每个部分内的文本）以及 height=100% 元素（删除每个元素的浮动属性和 height=100%，您会发现调整大小时不会出现问题视口的高度）。我建议您重新考虑制作网站结构的方式。Height=100% 元素有点棘手。尝试了解什么是浮动元素的自然行为，以便您了解为什么会遇到此问题。我希望它对你有帮助。

Answer 3

我已经解决了这个问题。我已经使用媒体查询来修复它。

例子：

@media screen and (min-width: 422px) and (max-width: 466px) {  /*done*/
#About {
    height: 400px;
}

#Portfolio {
    height: 300px;
}

}

我这样做是因为可能有其他人在谷歌上搜索并遇到同样的问题。

不过谢谢！

Answer 4

尝试min-height: 100%代替height: 100%. 将其他容器的高度相应地调整为最小高度。