Как найти размер div

I created a utility function for this, with high flexibility:

export type Size = {width: number, height: number};
export enum GetSize_Method {
    /** Includes: content, padding. Excludes: border, margin, scroll-bar (if it has one), "position:absolute" descendants. */
    ClientSize = "ClientSize",
    /** Includes: content, padding, border, margin, scroll-bar (if it has one). Excludes: "position:absolute" descendants. */
    OffsetSize = "OffsetSize",
    /** Includes: content, padding, border, margin, scroll-bar (if it has one), "position:absolute" descendants. Excludes: none. */
    ScrollSize = "ScrollSize",
    /** Same as ScrollSize, except that it's calculated after the element's css transforms are applied. */
    BoundingClientRect = "BoundingClientRect",
    /** Lets you specify the exact list of components you want to include in the size calculation. */
    Custom = "Custom",
}
export type SizeComp = "content" | "padding" | "border" | "margin" | "scrollBar" | "posAbsDescendants";

export function GetSize(el: HTMLElement, method = GetSize_Method.ClientSize, custom_sizeComps?: SizeComp[]) {
    let size: Size;
    if (method == GetSize_Method.ClientSize) {
        size = {width: el.clientWidth, height: el.clientHeight};
    } else if (method == GetSize_Method.OffsetSize) {
        size = {width: el.offsetWidth, height: el.offsetHeight};
    } else if (method == GetSize_Method.ScrollSize) {
        size = {width: el.scrollWidth, height: el.scrollHeight};
    } else if (method == GetSize_Method.BoundingClientRect) {
        const rect = el.getBoundingClientRect();
        size = {width: rect.width, height: rect.height};
    } else if (method == GetSize_Method.Custom) {
        const style = window.getComputedStyle(el, null);
        const styleProp = (name: string)=>parseFloat(style.getPropertyValue(name));

        const padding = {w: styleProp("padding-left") + styleProp("padding-right"), h: styleProp("padding-top") + styleProp("padding-bottom")};
        const base = {w: el.clientWidth - padding.w, h: el.clientHeight - padding.h};
        const border = {w: styleProp("border-left") + styleProp("border-right"), h: styleProp("border-top") + styleProp("border-bottom")};
        const margin = {w: styleProp("margin-left") + styleProp("margin-right"), h: styleProp("margin-top") + styleProp("margin-bottom")};
        const scrollBar = {w: (el.offsetWidth - el.clientWidth) - border.w - margin.w, h: (el.offsetHeight - el.clientHeight) - border.h - margin.h};
        const posAbsDescendants = {w: el.scrollWidth - el.offsetWidth, h: el.scrollHeight - el.offsetHeight};

        const sc = (name: SizeComp, valIfEnabled: number)=>custom_sizeComps.includes(name) ? valIfEnabled : 0;
        size = {
            width: sc("content", base.w) + sc("padding", padding.w) + sc("border", border.w)
                    + sc("margin", margin.w) + sc("scrollBar", scrollBar.w) + sc("posAbsDescendants", posAbsDescendants.w),
            height: sc("content", base.h) + sc("padding", padding.h) + sc("border", border.h)
                    + sc("margin", margin.h) + sc("scrollBar", scrollBar.h) + sc("posAbsDescendants", posAbsDescendants.h),
        };
    }
    return size;
}

Usage:

const el = document.querySelector(".my-element");
console.log("Size:", GetSize(el, "ClientSize"));
console.log("Size:", GetSize(el, "Custom", ["content", "padding", "border"]));

Мы тут рассказывали про размеры текста в вёрстке. Но что, если задавать размеры не только текста, но вообще всего? В CSS это делается так же легко, как и в случае с текстом. 

Как задаются размеры

У большинства элементов в CSS есть такие параметры для работы с размером:

height, width — высота и ширина;

max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);

min-height, min-width — минимальная высота и ширина;

margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;

padding — отступы внутри элемента, например, если внутри будет написан текст.

Например, нам нужно нарисовать кнопку, внутри которой будет текст. Описание стиля кнопки может быть таким:

.button{
width:75%;
max-width:600px;
min-width:300px;
padding: 15px 15px 19px 15px;
margin: 20px auto 50px auto;
}


Перевод: кнопка должна занимать от 300 до 600 пикселей в ширину, а в этом диапазоне быть 75% ширины от содержащего ее контейнера; внутри кнопки отступи сверху 15 пикселей, справа 15, снизу 19, слева 15 (по часовой стрелке). Саму кнопку от ближайшего элемента сверху отодвинь на 20 пикселей, слева и справа отодвинь одинаково, чтобы она встала по центру, а снизу отступи еще 50 пикселей до следующего элемента.

Размеры в пикселях — жёстко, но точно

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

width: 100px;

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

С пикселями есть только одна проблема: так как размеры и плотность пикселей на разных экранах разные, то может получиться так:

Чтобы было нагляднее, сделаем тестовую страницу с тремя блоками одинаковой высоты, но с шириной 100 пикселей.

<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Единицы измерения</title>
  <style type="text/css">
  	div{
  		/* у блоков будет единая высота */
  		height: 100px;
  		/* и становиться они будут друг за другом в один ряд */
  		float: left;
  	}
  	/* у блоков будет одинаковая ширина, но разный цвет фона */
  	.div1{
  		width: 100px;
  		background: red;
  	}
  	.div2{
  		width: 100px;
  		background: green;
  	}
  	.div3{
  		width: 100px;
  		background: blue;
  	}
  </style>

</head>
<body>
	<!-- первый блок -->
	<div class="div1"></div>
	<!-- второй блок -->
	<div class="div2"></div>
	<!-- третий блок -->
	<div class="div3"></div>

</body>
</html>

Справедливости ради, браузеры понимают эту проблему, поэтому умеют пересчитывать пиксели так, чтобы сайты не ломались. Например, если у вас есть современный экран с разрешением 288 точек на дюйм и тут же рядом старый экран с разрешением 72 точки на дюйм, то браузер поймёт, что надо пересчитать одни пиксели в другие. Если поставить два сайта рядом на этих экранах, они будут не один в один, но похожи.

В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах

Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:

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

width: 50vw;

В этом случае браузер сделает так:

Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:

<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Единицы измерения</title>
  <style type="text/css">
  	div{
  		/* у блоков будет единая высота */
  		height: 100px;
  		/* и становиться они будут друг за другом в один ряд */
  		float: left;
  	}
  	/* задаём ширину относительно ширины экрана */
  	.div1{
  		width: 10vw;
  		background: red;
  	}
  	.div2{
  		width: 20vw;
  		background: green;
  	}
  	.div3{
  		width: 50vw;
  		background: blue;
  	}
  </style>

</head>
<body>
	<!-- первый блок -->
	<div class="div1"></div>
	<!-- второй блок -->
	<div class="div2"></div>
	<!-- третий блок -->
	<div class="div3"></div>
</body>
</html>

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

height: 100vh;

Ещё есть vmin и vmax, которые работают так:

Это нужно, например, для адаптивной вёрстки, когда вам требуется привязаться к короткой стороне экрана и в зависимости от её размеров построить всю остальную страницу.

Проценты — очень гибко, но всегда нужен родительский элемент

Кажется, что vh и vw — это и есть те самые проценты от ширины экрана и что можно обойтись без обычных процентов. Но на самом деле просто проценты в вёрстке тоже используются, но с одним важным моментом:

Родительский элемент — тот, внутри которого находятся другие наши элементы. Например, мы хотим сделать на странице блок шириной 500 пикселей:

<div style="width: 500px;">
</div>


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

<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Единицы измерения</title>
  <style type="text/css">
  	div{
  		/* у блоков будет единая высота */
  		height: 100vh;
  		/* и становиться они будут друг за другом в один ряд */
  		float: left;
  	}
  	/* задаём ширину в процентах относительно родителя */
  	.div1{
  		width: 10%;
  		background: red;
  	}
  	.div2{
  		width: 20%;
  		background: green;
  	}
  	.div3{
  		width: 50%;
  		background: blue;
  	}
  </style>

</head>
<body>
	<div style="width: 500px;">
		<!-- первый блок -->
		<div class="div1"></div>
		<!-- второй блок -->
		<div class="div2"></div>
		<!-- третий блок -->
		<div class="div3"></div>
	</div>
</body>
</html>

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

Нужно ли в этом разбираться?

Вообще в современном мире взрослые фронтендеры верстают с помощью css-grid и готовых верстальных фреймворков: в них все размеры стандартизированы и прописаны под капотом, а верстальщики просто говорят «большое», «среднее», «сбоку», «на три четверти», «на всю ширину» и т. д. А уже как это интерпретировать и какие конкретно там размеры — этим занимается фреймворк. 

Но знать полезно. 

Размеры элементов

Последнее обновление: 30.09.2021

Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию для этих свойств – auto, то есть браузер сам определяет ширину и высоту элемента.
Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

width: 150px;
width: 75%;
height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если
размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям.
То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей.
Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.

Процентные значения для свойства width вычисляются на основании ширины элемента-контейнера. Если, к примеру,
ширина элемента body на веб-странице составляет 1000 пикселей, а вложенный в него элемент <div> имеет ширину 75%,
то фактическая ширина этого блока <div> составляет 1000 * 0.75 = 750 пикселей.
Если пользователь изменит размер окна браузера, то ширина элемента body и соответственно ширина вложенного в него блока div тоже изменится.

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

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Размеры в CSS3</title>
        <style>
		div.outer{
			width: 75%;
			height: 200px;
			margin: 10px;
			border: 1px solid #ccc;
			background-color: #eee;
		}
		div.inner{
		
			width: 80%;
			height: 80%;
			margin: auto;
			border: 1px solid red;
			background-color: blue;
		}
        </style>
    </head>
    <body>
		<div class="outer">
			<div class="inner"></div>
		</div>
	</body>
</html>

В то же время фактические размеры элемента могут в итоге отличаться от тех, которые установлены в свойствах width и height. Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Размеры в CSS3</title>
        <style>
		div.outer{
			width: 200px;
			height: 100px;
			margin: 10px;
			padding: 10px;
			border: 5px solid #ccc;
			background-color: #eee;
		}
        </style>
    </head>
    <body>
		<div class="outer">
			Определение фактического размера в CSS 3
		</div>
	</body>
</html>

Как видно на скриншоте, в реальности значение свойства width – 200px – определяет только ширину внутреннего содержимого элемента,
а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого (свойство width) +
внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство margin). То есть элемент будет иметь ширину в
230 пикселей, а ширина блока элемента с учетом внешних отступов составит 250 пикселей.

Подобные расчеты следует учитывать при определении размеров элементов.

С помощью дополнительного набора свойств можно установить минимальные и максимальные размеры:

• min-width: минимальная ширина

• max-width: максимальная ширина

• min-height: минимальная высота

• max-height: максимальная высота

min-width: 200px;
width:50%;
max-width: 300px;

В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей и больше 300 пикселей.

Переопределение ширины блока

Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих значений:

• content-box: значение свойства по умолчанию, при котором браузер для определения реальных ширины и высоты элементов
  добавляет берет соответственно значения свойств width и height элемента

  . Например:

width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid #ccc;
background-color: #eee;
box-sizing: content-box;

В данном случае элемент будет иметь ширину в 200 пикселей и высоту в 100 пиксей.

• padding-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы как часть своего значения. Например, пусть у нас есть следующий стиль:

  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #eee;
  box-sizing: padding-box;
  

  Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) – 10px (padding-left) – 10px (padding-right) = 180px.

  Стоит отметить, что большинство современных браузеров не поддерживают данное свойство.

• border-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы и границы как часть своего значения.
  Например, пусть у нас есть следующий стиль:

  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #eee;
  box-sizing: border-box;
  

  Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) – 10px (padding-left) – 10px (padding-right) – 5px (border-left-width)
  – 5px (border-right-width) = 170px.

Например, определим два блока, которые отличаются только значением свойства box-sizing:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Размеры в CSS3</title>
        <style>
		div{
			width: 200px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 5px solid #ccc;
            background-color: #eee;
		}
        div.outer1{
			box-sizing: content-box;
        }
		div.outer2{
			box-sizing: border-box;
        }
        </style>
    </head>
    <body>
        <div class="outer1">
            Определение фактического размера в CSS 3
        </div>
		<div class="outer2">
            Определение фактического размера в CSS 3
        </div>
    </body>
</html>

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

В этом посте мы обсудим, как получить ширину контейнера div в JavaScript и jQuery.

В чистом JavaScript вы можете использовать clientWidth свойство, чтобы получить ширину контейнера div. Он возвращает фактическое пространство, используемое отображаемым содержимым, включая его горизонтальное заполнение. Например, следующий код возвращает значение 410.

Изменить в JSFiddle

 
В качестве альтернативы вы можете использовать offsetWidth свойство, если вам нужно общее количество места, которое занимает контейнер div. Он возвращает ширину контейнера div, включая отступы, границы и полосы прокрутки. Например, следующий код возвращает значение 412.

Изменить в JSFiddle

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

Изменить в JSFiddle

 
Другим приемлемым способом является использование getBoundingClientRect() метод, который возвращает размер контейнера div. Возвращенный объект содержит свойство ширины, значение которого включает отступы и границу. Например, следующий код возвращает значение 412.

Изменить в JSFiddle

2. Использование jQuery

С помощью jQuery вы можете использовать .width() метод для получения ширины содержимого контейнера div. Например, следующий код возвращает 100.

Изменить в JSFiddle

 
The .width() Метод возвращает безразмерное значение. Если вам нужна ширина с неповрежденными единицами, например 400px, использовать .css("width") вместо.

Изменить в JSFiddle

 
В качестве альтернативы, если вам нужно включить отступы и границы (и, возможно, поля), рассмотрите возможность использования .outerWidth() метод. Например, следующий код возвращает 412.

Изменить в JSFiddle

Это все, что касается получения ширины контейнера div в JavaScript и jQuery.

От автора: здравствуйте, читатели этого блога. В этой статье я хочу поделиться с вами подробной информацией по тому, как определять в css размер блока, то есть элемента на веб-странице.

На какие типы делятся элементы

Дело в том, что не все фрагменты на веб-странице – блоки. Элементы вообще делятся на блочные и строчные. Вторые могут спокойно записываться в одну строку и при этом им не нужно ничего дополнительно прописывать. Простой пример строчного элемента – ссылка. На одной строке может быть сколько угодно ссылок, пока они будут помещаться на ней.

Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.

Рис. 1. Основные свойства, которые помогают задать размер

Простые свойства для размеров

Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.

Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.

Размер в пикселях

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

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

Это так называемые фиксированные шаблоны. Сегодня все еще много сайтов работают таким образом. Например, социальная сеть Вконтакте. Попробуйте на компьютере уменьшить размеры окна и вы увидите, что шаблон никак не меняется. Конечно, у Вконтакте есть отдельные версии для планшетов и смартфонов, поэтому они решили оставить фиксированный шаблон.

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

И что это значит? А то, что при необходимости блок будет уменьшаться. Если сжать окно, то он тоже уменьшится. В то же время, если разрешение экрана позволяет, ширина будет составлять 1320 пикселей ровно. Уменьшая окно вы не увидите горизонтальный скролл.

Однако тут же можно задать еще и минимальную ширину. Если блоку записать это свойство, то он не будет становиться уже, чем указанное значение. Например:

Если ширина окна станет меньше 600 пикселей, то блок перестанет сжиматься и появиться та самая горизонтальная полоса прокрутки.

Размер в процентах

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

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

В итоге сайдбар получит 28% ширины родительского элемента (а в нашем случае это общий контейнер), а основной блок – 62%. Их общая ширина составит 90%. Остальные 10 оставим на различные внешние и внутренние отступы, рамки и т.д.

Рис. 2. Резиновые блоки изменяют свои размеры при уменьшении окна в браузере

Как влияют отступы на размеры блоков

Когда вы задаете ширину какому-то блоку с помощью свойства width, это может быть далеко не окончательное значение. Дело в том, что так мы определяем ширину только той части, в которй непосредственно есть содержимое. Нужно помнить, что в css padding увеличивает размер блока, так же, как и рамка (border).

Допустим, возьмем боковую колонку. Мы дали ей 28% от всей ширины контейнера. Но чтобы содержимое в сайдбаре не прилипало к краям, ем нужно дать кое-какие отступы. Также, возможно, вы захотите добавить боковой колонке рамочку.

Вот уже и получается, что общая ширина сайдбара увеличилась на 44 пикселя (отступы справа и слева по 20 и рамка с этих же сторон по 2). Есть вариант для тех, кто не хочет сильно заморачиваться над размерами и записывать их сразу с учетом отступов и рамок. Тогда нужно записать так:

Это замечательное свойство делает так, что в ширину блока (width) начинают включаться внутренние отступы (padding) и рамки. Теперь если вы зададите контенту размер в 62%, он останется таковым в любом случае. А ведь есть еще и внешние отступы, но они уже на размеры блока не влияют. Но если вы захотите сделать, допустим, большой отступ справа от боковой колонки, то контент просто не влезет и вынужден будет перенестись вниз.

Резиновые картинки

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

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

Итог

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