2016-04-20 7 views
0

как я могу решить это неудачное позиционирование divs? Как вы можете видеть из Codepen here, #about div и #link div накладываются. Это будет полноэкранный сайт с прокруткой на одну страницу и чтобы каждый div имел полную высоту, я написал следующие строки кода, которые я думаю, вызывает проблему. Спасибо заранее! :)Неправильное позиционирование divs

#main, #about, #link, #third { 
    height: 100vh; 
    padding-top: 40px; 
} 

EDIT: Проблема появляется на небольших устройствах (даже если уменьшить размер окна). Div с ID #about помещается под div с ID #link, в результате текст становится неразборчивым.

+1

Я не понимаю, в чем ваша проблема. Что вы подразумеваете под «неудачным» позиционированием? –

+0

Помимо выпадающего меню на маленьких экранах, не имеющих фона, я не вижу проблемы здесь. Пожалуйста, не могли бы вы уточнить ** точную ** настройку, когда эта проблема возникнет? – RhysO

+0

Извините, я не был точен; Проблема возникает на небольших устройствах (даже если вы уменьшаете размер окна). Div с идентификатором ** # около ** помещается под div с идентификатором ** # link **, в результате текст становится неразборчивым. Надеюсь, что теперь проблема понятна. Еще раз спасибо! – paolopolix

ответ

4

Попробуйте min-height: 100vh вместо height: 100vh, поэтому делители могут расширяться при необходимости.

+0

как обычно функциональные решения всегда самые тривиальные .. спасибо @saison, он работает сейчас! :) – paolopolix

Смежные вопросы