В статье представлен ряд проблем, которые возникают в ситуациях, когда размеры потомка начинают превышать значения своего родителя. Эта проблема решается операцией, которую программисты называют ресайз окна. Алгоритм ее реализации описан далее.
Довольно часто на практике встречается ситуация, когда дочерний элемент за счет внешних факторов перерастает по размерам своего родителя. Отследить такую ситуацию сложно, поэтому необходимо соблюдать предосторожность во избежание проявления багов.
Предлагаю на практике рассмотреть один из типичных случаев и изучить решение главной проблемы. Для этого смоделируем ситуацию, когда необходимо установить усложненный фон для сайта. Для этого применяют вложенные друг в друга блоки. В коде это выглядит следующим образом:
HTML
<body> <div class="wrap"> <div class="main"> <!--содержимое страницы--> </div> </div> </body>
CSS
.wrap { background: url(gradient.png) repeat-x; } .main { width: 980px; margin: 0 auto; }
Вот с этого момента можно столкнутся с типичными проблемами начинающего и неопытного верстальщика.
Обрезанный фон
Первая коварная проблема, которая может возникнуть в данных условиях, будет связана с отрисовкой фона.
Чтобы ее обнаружить следует слегка уменьшить видимую область окна браузера до тех пор, пока не появится полоса прокрутки. После этого теням ползунок, чтобы изучить невидимую область окна. Обнаруживаем, что наш фоновый рисунок не распространяется в невидимую зону. Он занимает ширину окна браузера, а не содержимого.
Проблема распространяется на все популярные браузеры, кроме одного. В этот раз Internet Explower удивляет приятно. Он этой болезнью не страдает.
Почему возникает такая проблема?
Теперь разберемся, от чего получается такая канитель. В нашем примере присутствует родитель wrap, для которого задан фоновый рисунок, и потомок main, у которого в свою очередь задана фиксированная ширина. Так как родитель не имеет точного значения ширины, то он будет ориентироваться на ширину браузера и повторять это значение.
В результате этого выплывает причина разрыва фона. Мы уменьшаем окно браузера меньше значения ширины потомка, из-за чего он становится шире родителя и поэтому появляется белый фон без градиента.
Теперь вернемся к старичку Internet Explower, каким образом его не касается наша проблема? Ответ очень прост, в программе заложено, что ширина родителя всегда должна соответствовать ширине своего потомка, поэтому родитель растянется до габаритов своего содержимого блока.
Смещение центрированного фона
Практически такая же ситуация возникнет при использовании не повторяемого фонового рисунка. Другими словами значение repeat-x изменено на no-repeat. И для большего эффекта установим центровку для фона. В коде это будет смотреться так
CSS
.wrap { background: url(fon.jpg) center center no-repeat; } .main { width: 980px; margin: 0px auto; padding-top:20px; color:#c7c7c7; }
А на практике получится вот такой баг
Причины такого неадекватного представления фона полностью совпадают с описанными выше.
Изменение положения абсолютно позиционированных блоков
Существует еще одна проблема, которая возникает вследствие выпадения потомка из родителя. Рассмотрим абстрактную схему с использованием трех составляющих фона: основная подложка, подложка контейнера и какой-либо значок, который занимает определенную область на странице.
Переходим к примеру кода
HTML
<body> <div class="vk"></div> <div class="main"> <!--содержимое страницы--> </div> </body>
CSS
body { position: relative; background: #eee; } .main { width: 980px; margin: 0 auto; background: #c7c7c7; } .vk { background: url(vk.png) no-repeat; background-size: 50px; width: 50px; height: 50px; position: absolute; right: 0; top: 10px; }
Основная задумка заключается в том, чтобы иконка вконтакте располагалась справа от контента, а не так, как получилось в нашем примере
Решение всех проблем
Решение всех этих проблем до неприличности просто. Достаточно добавить в код CSS свойство, посредством которого родитель никогда не станет меньше потомка. Другими словами, указываем минимально возможное значение для него:
CSS
body { min-width: 980px; }
После этого фон с градиентом никогда не обрежется, отцетрованное фоновое изображение займет правильную позицию, а абсолютно позиционированный объект не будет наплывать на контент.
В каких браузерах работает?
| 6.0+ | 7.0+ | 9.5+ | 4.0+ | 3.5+ | - | - |
