Question

我发现以下网站的联系部分一直在底部溢出，特别是当窗口宽度减少到移动尺寸时：

http://phixhut.com/test/1page/onepage.html#contact

我对叠加部分的CSS是：

-webkit-transition: all 500ms ease;
transition: all 500ms ease;
padding: 55px 0 15px 0;
width: 100%;
background-color: #83aa30;
background-color: rgba(131, 170, 48, 0.6);
background-image: url("../images/GPlay.svg");
position: absolute;
bottom: 0px;
top: 0px;

如果我删除＆＃34; top：0px＆＃34;底部的溢出消失但后来似乎溢出了顶部。

不确定如何让联系部分完美地调整大小以阻止这些溢出。任何帮助将不胜感激！

Answer 1

有一些问题会导致您的问题，但最简单的排序方法是删除height的当前class="contact"并将其设置为height { {1}}容器。

就个人而言，我会重写你的代码。

将地图和叠加层作为一个背景图像更有意义，并删除你的绝对定位和你在那里的额外div。

它将A.简化您的代码和B.减少HTTP请求的数量＆amp; C.您的网站将采取您所追求的流动性。

Answer 2

虽然效率低下，但解决方案是overflow: hidden

但是，您不应该使用它，因为大多数情况下使用它基本上是隐藏不需要的代码。相反，尝试在CSS中修复问题而不使用overflow：hidden，这样当你调整大小时什么都不会溢出。

您可以通过确保某些项目未设置为固定宽度或高度来实现，因为如果屏幕分辨率小于此值，则会溢出。

希望有所帮助。

如何阻止内容溢出容器？

2 个答案: