Вход
huffson.com
huffson.com
testopay.com

Параметры css width и height для задания размеров элементов html страницы

birds
Администратор

Сообщений: 626

Благодарности: 87

На форуме: с 02.03.20

07 апр 2022   10:35

Здравствуйте, уважаемые читатели! Сегодня мы рассмотрим как задавать размеры блочных элементов веб страницы с помощью css свойств и настроить отображение контента в случае если он не помещается в элементе.

width и height - ширина и высота элементов в css

С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:

width: auto|<ширина>|inherit height: auto|<ширина>|inherit

В качестве значений можно использовать любые доступные в css единицы измерения — например, пикселы (px), дюймы (in), пункты (pt) и др.:

p {width:200px; height:150px}

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

div {width:40%;}

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

Рассмотрим несколько примеров.

width and height

Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.

Результат:

размеры css width и height

В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.

Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:

.layer2 { background: #eee; width:250px; }

Результат:

css width

Как видим ширина абзаца стала уже и равна 250 пикселей, а его высота увеличилась так, чтобы уместился текст, так как параметр height остался равным auto.

Теперь давайте зададим высоту и ширину абзаца в процентах:

.layer2 { background: #eee; width:50%; height:50%; }

Результат:

значения ширины и высоты в процентах

Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.

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

Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:

min-width: <ширина> min-height: <высота>

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:

max-width: <ширина> max-height: <высота>

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

Стоит уточнить, что задание параметров height и width имеет смысл только для блочных тегов, так как для строчных элементов эти параметры браузером не обрабатываются.

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

Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:

.layer2 { background: #eee; width:100px; height:100px; }

Результат:

текст вышел за пределы элемента

Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css - overflow.

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента Переполнение контента может возникнуть, когда ограничивают и ширину и высоту элемента. Рассмотрим два абзаца:

Текст первого абзаца

Текст второго абзаца

Результат:

overflow

Так как ни ширина ни высота для абзацев не заданы, то браузер самостоятельно рассчитывает их исходя из своего собственного понимания значения auto. В результате абзацы по ширине заняли все доступное пространство, а по высоте в соответствии с содержащимся в них контентом.

Теперь у первого абзаца ограничим ширину:

Текст первого абзаца

Текст второго абзаца

Результат:

overflow

Ширина абзаца ожидаемо уменьшилась, а высота установилась такой, чтобы вместить в себя весь текст. Ну а теперь ограничим у первого абзаца и высоту:

Текст первого абзаца

Текст второго абзаца

переполнение контента

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

overflow: visible|hidden|scroll|auto|inherit

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

Правило overflow:hidden скрывает все, что не помещается в контейнере:

overflow:hidden

Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:

 

Текст первого абзаца

Текст второго абзаца

overflow:scroll

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

Текст первого абзаца

Текст второго абзаца

Результат:

overflow:auto

Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом overflow-x отвечает за горизонтальную ось, а overflow-y за вертикальную ось.

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

p{overflow-x:hidden;overflow-y:auto;}

И задача будет решена.

Vitalik77
Пользователь

Сообщений: 11

Благодарности: 0

На форуме: с 09.08.21

07 апр 2022   10:37

Здравствуйте! Подскажите пожалуйста как с таким вопрос справиться.

У меня на сайте сверху два одинаковых рядом блока. Один из них с логотипом, второй с регистрацией. Когда вводишь неправильный логин или пароль высвечивается подсказка об ошибке (в блоке с регистрацией) и соответственно блок увеличивается... Но увеличивается только один блок, а тот который  логотипом каким был, таким и остается... как сделать чтобы, если увеличивается один и и увеличивался бы другой, чтобы они были одинаковыми?!

Вот код css:

.wrapper_otz_top {

width: 280px;

min-height: 210px;

max-height: inherit;

background: #40b4ff;

color: #fff;

float: left;

margin: 3px;

overflow: hidden;

}

причем не важно, какое значение я ставлю в max-height: inherit или 100% или 280px второй блок увеличивается а первый нет (((

birds
Администратор

Сообщений: 626

Благодарности: 87

На форуме: с 02.03.20

07 апр 2022   10:37

[b]Vitalik77[/b], 

В вашем случае свойства max-height никак не поможет. Чтобы блоки всегда были одинаковой высотой, можно указать браузеру отображать  их как ячейки таблицы.

Для этого блоку обертке указываете свойство display:table-row, а колонкам указываете свойство display:table-cell. Правда в этом случае не будут работать внешние отступы margin:3px. Вместо них можно использовать границы border.