如何阻止内容溢出其容器？

我发现以下站点的接触部分持续在底部蔓延，特别是当窗口宽度减少到手机大小：如何阻止内容溢出其容器？

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;

如果我删除了“top：0px”，但底部的溢出消失了，但它似乎溢出了顶部。

不知道如何去取得联系部分调整大小pefectly停止这些溢出。任何帮助将不胜感激！

来源

2015-07-13 user1898662

看来你正在寻找溢出：隐藏 – nikhil

或溢出：汽车;如果你想div可以滚动，也应该设置高度。 – OSDM

-1

的解决方案，虽然效率不高，会overflow: hidden

你不应该使用，但是，因为大部分的时间使用的是从根本上隐藏不需要的代码。相反，尝试在CSS中解决问题而不使用overflow：hidden，以便在调整大小时不会溢出。

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

希望有所帮助。

来源

2015-07-13 10:57:29 Lansana

有几件事是造成你的问题，但排序它会删除你当前height为class="contact"，并将其设置为您overlay容器height最简单的方法。

我个人会重写你的代码。

把你的地图和覆盖图作为一个背景图像并删除你的绝对定位和你在那里的额外的div会更有意义。

它会A.简化你的代码和B.减少HTTP请求的数量C.你的网站会在你以后的流动性中起作用。

来源

2015-07-13 11:09:29 DCdaz

如何阻止内容溢出其容器？

回答

相关问题