Высота и ширина в CSS

Размеры элемента (или его высота и ширина) являются динамическими, так как они колеблются, чтобы соответствовать содержимому. Также можно установить конкретные размеры.

blockquote { width: 600px; }

<blockquote> не будет занимать всю доступную ширину, но останется шириной 600px в любой ситуации:

• если окно браузера уже, чем 600px, то браузер покажет горизонтальную полосу прокрутки;
• если окно браузера шире, чем 600px, то <blockquote> останется 600px в ширину и не будет занимать всё пространство.

Поскольку мы установили только ширину, то <blockquote> остаётся гибким по высоте: высота переменная, чтобы соответствовать содержимому <blockquote>.

Одновременная установка высоты и ширины

Установив размеры элемента, мы оставим его фиксированным, независимо от объёма его содержимого.

Что произойдёт, если содержимое длиннее, чем элемент может содержать?

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

Поведение по умолчанию может оказаться неожиданным: содержимое будет отображаться в любом случае!

CSS

blockquote { background: yellow; height: 50px; width: 100px; }

HTML

<blockquote>Содержимое, эмм..., находит путь</blockquote>

overflow

Свойство overflow позволяет управлять содержимым элемента, в том случае, когда содержимое длиннее, чем его контейнер.

Значение по умолчанию visible: содержимое будет отображаться в любом случае, потому что «Почему вы хотите закрыть контент от чтения, если он присутствует в коде?». Вы можете считать что HTML превалирует над CSS.

Применив overflow: hidden вы просто запретите переполнение любого видимого содержимого.

Если вы хотите, чтобы ваше содержимое переполнялось, но по-прежнему желаете сделать его доступным, то можете решить отобразить полосы прокрутки путём применения overflow: scroll.

Лучшим вариантом является использование overflow: auto, так как полосы прокрутки появятся только если содержимое будет переполнено, но до тех пор они останутся скрытыми.

Опасайтесь фиксированных размеров

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

• убедитесь, что содержимое не переполняется;
• если это произойдёт, используйте overflow: hidden или overflow: auto, чтобы сохранить дизайн от разрушения.

Перейти к заданиям