Как убрать зазор после блока в мобильном браузере?

Question

[lexchz]

Привет всем. Подскажите, как убрать тонкий зазор (визуально кажется, как пол-пикселя в толщину), образовавшийся между блоками сайта в мобильном браузере? В стилях не задано никаких отступов, и в десктопных браузерах выглядит всё нормально, также все нормально выглядит в мобильном Firefox. Проблема замечена в мобильном Хроме и Опере.

Есть предположение, что причина в дробном значении высоты сайта в пикселях. Скриншот прилагаю. На скриншоте - тонкий зазор между предпоследним и последним блоками сайта.

Comments

[Игорь Воротнёв]

причина в дробном значении высоты сайта в пикселях - вы сами себе ответили.

[lexchz]

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

[Игорь Воротнёв]

lexchz: поставьте height: 100%, или flex используйте, чтобы растянуть блок по высоте. Если у вас несколько таких блоков и прокрутка - попробуйте задать общему контейнеру темный фон, чтобы скрыть этот дефект.

[lexchz]

Игорь Воротнёв: решил проблему таким образом:

body {
background: linear-gradient(90deg, #030d14, #0b0304) no-repeat 0 101% #F2EFED;
background-size: 100% 300px;
}

footer {
background: linear-gradient(90deg, #030d14, #0b0304);
min-height: 81px;
}

Answer 1

[expeerd]

В порядке костыля: сделать отрицательный маргин у нижнего блока, а смещение компенсировать падингом.
Еще вариант - если позиционирование нижнего блока абсолютное или фиксированое - можно еще сделать бордер у нижнего блока сверху на пиксель.

Comments

[lexchz]

Спасибо, помогло