Как остановить содержимое от переполнения их контейнеров?

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; 

разлив на дне исчезает, если я удалить «сверху: 0px», но потом оказывается перетечь в верхней части.

Не знаете, как добиться того, чтобы контактная секция менялась в размерах, чтобы остановить эти разливы. Любая помощь будет принята с благодарностью!

Answer 1

решение, хотя и неэффективно, будет overflow: hidden

Вы не должны использовать это, однако, поскольку большинство времени использование этого заключается в основном скрыть нежелательный код. Скорее попытайтесь исправить проблему в CSS без использования переполнения: hidden, так что при изменении размера ничего не переполняется.

Вы можете сделать это, убедившись, что определенные элементы не установлены на фиксированную ширину или высоту, потому что, если разрешение экрана меньше этого, оно будет переполняться.

Надеюсь, что это поможет.

Answer 2

Существует несколько вещи, что вызывает проблему, но самый простой способ сортировки было бы удалить текущий height вас есть для class="contact" и установить его в height вашего overlay контейнера.

Лично я бы переписал ваш код.

Было бы разумнее иметь вашу карту и наложение в качестве одного фонового изображения, а также удалить ваше абсолютное позиционирование и дополнительные div, которые у вас есть.

Это будет A. Оптимизируйте свой код и B. Уменьшите количество запросов HTTP-запроса & C. Ваш сайт будет действовать в соответствии с текущим характером.