width and height

CSS height Property

The height of an element does not include padding, borders, or margins!

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

Note: The min-height and max-height properties override the height property.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.height=»500px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
auto	The browser calculates the height. This is default	Demo ❯
length	Defines the height in px, cm, etc. Read about length units	Demo ❯
%	Defines the height in percent of the containing block	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the height of an element to 50% of the height of the parent element:

Источник

Auto-Growing Inputs & Textareas

By default, and elements don’t change size based on the content they contain. In fact, there isn’t any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case. But of course, there are ways, my friend. There are always ways. I was thinking about this after Remy Sharp blogged about it recently in the context of inline elements.

Non-input elements expand naturally

It’s weird to me that there is no way to force an input element to mimic this behavior, but alas. We can make any element editable and input-like with the contenteditable attribute:

That will naturally grow to be the width it needs to be for the content it contains. If it was a or any other element that is block-level, it would also expand vertically as needed.

But are non-input elements accessible?

1. What about the fact that forms can be submitted with the Enter key?
2. What about the idea that form data is often serialized and sent along, while the code that’s doing it probably isn’t looking for a span?
3. Does it actually read the same as an input in a screen reader?
4. What other things¹ do inputs naturally do that I’m not thinking of?

As attracted as I am to the idea that we can get auto-resizing for free from the browser by using non-input elements, I’m also a little worried about (my) unknown usability and accessibility risk.

Resizing actual input elements

So let’s say we stick with and . Can we make them resize-able even though it’s not particularly natural?

One idea I had is to wrap the input in a relative inline parent and absolutely position it inside. Then, with JavaScript, we could sync the input value with a hidden span inside that wrapper, pushing the width wider as needed.

For textareas, one classic technique is to count the number of line-breaks, use that to set the height, then multiply it by the line-height. That works great for preformatted text, like code, but not at all for long-form paragraph-like content.

Here are all these ideas combined.

Shaw has a little JavaScript one-liner that is very clever. The JavaScript sets a data-* attribute on the element equal to the value of the input. The input is set within a CSS grid, where that grid is a pseudo-element that uses that data-* attribute as its content. That content is what stretches the grid to the appropriate size based on the input value.

I absolutely know that you fellow web nerds have solved this six ways to Sunday. Let’s see ’em in the comments.

1. Eric Bailey hit me up with a few thoughts off the top of his head: (1) There’s no accessible name. (2) It probably won’t work with voice control. (3) It will get ignored in High Contrast Mode.

Источник

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

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

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

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

width: auto||inherit
height: auto||inherit

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

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

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

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

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

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

.layer2 background: #eee;
width:250px;
>

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

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

.layer2 background: #eee;
width:50%;
height:50%;
>

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

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

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

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

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

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

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

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

.layer2 background: #eee;
width:100px;
height:100px;
>

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

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента

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

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

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

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

Ну а теперь ограничим у первого абзаца и высоту:

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

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

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

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

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

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

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

На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей:

Источник