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

Я потратил последние несколько недель на то, как правильно спроектировать макет. Я в основном думал, что у меня все идеально с моим макетом веб-сайта, и я готов перевести кодировку в Wordpress... а затем я случайно изменил размер своего веб-браузера и обнаружил, что все мои слои div перекрывают друг друга.

Вот как это выглядит: overlapping divs

В принципе, похоже, что это главным образом мое центральное содержимое div, которое выжимается, а также мое изображение заголовка и навигационная клавиша находятся в том же верхнем div. Мой нижний колонтитул также сжимается. Я искал интернет для решения этой проблемы и не могу найти ничего.

Как мне исправить это, чтобы мой div оставался на месте при изменении размера браузера?

ОТВЕТЫ

Ответ 1

Я понял это. Оказывается, ширина поля моего центра была продиктована полями, а не только прямой шириной (т.е. 500 пикселей). Поэтому всякий раз, когда страница была изменена, поля по сторонам браузера пытались остаться такими, какими они были, тем самым уменьшив всю колонку. Мне просто нужно было избавиться от полей и указать, где я хочу, чтобы колонка сидела на странице и просто оправдывала ее ширину.

Ответ 2

как сказал Уолтер, ваш CSS будет полезен. Но главная проблема заключается в том, что содержимое в div переполняется для других div, потому что содержимое div не может содержать все содержимое.
В своем css попробуйте установить свойство переполнения div либо автоматически (показывает полосы прокрутки), либо скрытые (чтобы просто скрыть содержимое, если оно выходит за пределы div) например.

overflow:auto;

или

overflow:hidden;

Ответ 3

Выразите ширину и размер шрифта в ems. Здесь хороший калькулятор: http://riddle.pl/emcalc/

Процент также будет работать.

Проверьте css в stackoverflow и попробуйте изменить размер масштабирования в своем браузере здесь - вы увидите, что все изменяется на любой уровень масштабирования.

Ответ 4

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

Ответ 5

Можете ли вы разместить некоторые из своих CSS?

Самый простой способ - дать всем вашим столбцам относительно нормальные настройки width, чтобы размер окна браузера не влиял на размер вашего макета. Получение столбцов (-ов) ширины жидкости является более сложным и в большей степени зависит от особенностей вашего макета.

Ответ 6

Проверьте свойство min-width. Другим вариантом является применение другой таблицы стилей, когда ширина окна просмотра меньше х пикселей с CSS3 Media Queries следующим образом:

@media all and (max-width: 30em) {
  /* Alternative narrow styles */
}

или так:

<link media="all and (max-width: 30em)"
      rel="stylesheet" href="narrow.css" />

CSS3 Media Queries по-прежнему не получили широкого распространения, поэтому вам может понадобиться изучить решение, которое применяет "узкую" таблицу стилей с JavaScript через событие window.onresize. Я бы рекомендовал jQuery для такого решения.

Ответ 7

У меня была такая же проблема, если у вас есть ширина и высота в контейнере DIV, она не изменится, кроме ширины, если вы не установите минимальную ширину. Проблема, с которой я столкнулся, заключалась в том, чтобы сделать окно браузера, в котором divs хотели бы перейти к следующей строке

так что я сделал в контейнере, я установил высоту и ширину. Прежде чем я не установил высоту, я разрешаю divs определять высоты.