Question

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

在手机上查看时，您会看到顶部的地址栏。可以说它的高度为10％，我的网站高度将为90％。但是当我向下滚动并且条形图消失时，高度自动调整。有修复吗？

我还不是很好。你能帮我吗？

Answer 1

我猜你必须改变一些结构性东西。您的浮动元素（每个部分内的文本）以及高度= 100％元素都有问题（删除浮动属性和高度=每个元素的100％，您将看到您没有获得调整视口高度时出现问题。我建议你重新思考一下你制作网站结构的方式。高度= 100％元素有点棘手。尝试了解float元素的自然行为，以便您了解为什么会遇到此问题。我希望它可以帮到你。

Answer 2

尝试使用min-height: 100%代替height: 100%。根据最小高度调整其他容器的高度。

Answer 3

我认为您应该再读一次关于RWD布局的内容。你有一些基本的错误（就像每个菜鸟，我过去也做过）。例如，您将#Contact定义为100％高度，但在其内部形成总是500px高度。这会产生一些故障 - 例如，想象一下你在高度只有300px的设备上打开它 - 你的div会得到300px，但是你说这个形式需要至少500，所以它会高于它的父级。这意味着如果您使用％或ems或其他相对单位给父母，您也应该为其子女使用它。

我还在第558行的CSS中找到了破坏代码的东西：

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

header nav {
   width: 450px;
}

它在宽度方面的某个时刻制动manu内容。

此外，我发现你过度使用id，这使得很难对网站进行任何更改。基本上每个具有背景的div都应该具有相同的类，您可以在其中定义min-height，margin和其他CSS属性，这些属性对于这些div是常见的。我建议你阅读this文章。基本上你的DIVS CSS看起来像这样：

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

现在，如果你需要更改div div的尺寸，你只需要在一个地方更改它。

Answer 4

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

示例：

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

#Portfolio {
    height: 300px;
}

}

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

谢谢！

响应式网站和高度的麻烦

4 个答案: