Який параметр задає висоту елемента. CSS - Висота блоку щодо його ширини. Перевизначення ширини блоку

У цій статті розберемо, як в CSS можна встановити блоку висоту в процентному відношенні від його ширини. Застосування цієї технології розглянемо на прикладі створення каруселі (слайдера) Bootstrap із зображень, що мають різні розміри.

Створення блоку з висотою, яка має певний відсоток від його ширини

1. Створити HTML структуру з 2 блоків:
   Перший блок має 2 класу. За допомогою класу item-responsive встановимо блоку відносне позиціонування. Це необхідно виконати для того, щоб 2 блок (який матиме абсолютне позиціонування) розташовувався щодо нього. Крім цього даний клас також використовується для того, щоб перед вмістом відповідних елементів (item-responsive) додати псевдоелемент: before. Цей елемент буде встановлювати необхідну висоту блоку щодо його ширини за допомогою CSS-властивості padding-top. Трюк даного методу полягає в тому, що якщо властивості padding вказувати значення не в пікселях, а в процентах, то воно буде розраховуватися браузером щодо його ширини. Таким чином, можна отримати блок з необхідною висотою. Наступна дія - це вказати 2 блоку абсолютне позиціонування і вирівняти його по першому блоку.
2. Додати на сторінку наступний CSS код: .item-responsive (position: relative; / * відносне позиціонування * /) .item-responsive: before (display: block; / * відображати елемент як блок * / content: ""; / * вміст псевдоелемента * / width: 100%; / * ширина елемента * /) .item-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /) .item-responsive> .content ( position: absolute; / * абсолютне положення елемент * / / * положення елемента * / top: 0; left: 0; right: 0; bottom: 0;) / * При необхідності (для блоків, що мають дані класи) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /) .item-2by1 (padding-top: 50%; / * (1: 2) * 100% * /) .item -1by1 (padding-top: 100%; / * (1: 1) * 100% * /)

Застосування вищенаведеної технології при створенні каруселі Bootstrap

Якщо ви не знайомі з Bootstrap і хочете дізнатися що це таке, то можете скористатися статтею Введення в Bootstrap.

Розглянемо приклад, в якому вищенаведену HTML структуру і CSS код будемо використовувати для відображення слайдів каруселі Bootstrap.

Як зображень використовуватимемо такі файли:

• carousel_1.jpg (ширина = 736px, висота = 552px, співвідношення сторін (висота до ширини) = 1,33);
• carousel_2.jpg (ширина = 1155px, висота = 1280px, співвідношення сторін (висота до ширини) = 0,9);
• carousel_3.jpg (ширина = 1846px, висота = 1028px, співвідношення сторін (висота до ширини) = 1,8);
• carousel_4.jpg (ширина = 1140px, висота = 550px, співвідношення сторін (висота до ширини) = 2,07);
• carousel_5.jpg (ширина = 800px, висота = 600px, співвідношення сторін (висота до ширини) = 1,33);

Зображення будемо задавати як фон. Це дозволить використовувати в каруселі Bootstrap 3 зображення з не однаковими співвідношеннями сторін.

HTML розмітка каруселі:

CSS код каруселі:

Item-responsive (position: relative; / * відносне позиціонування * /) .item-responsive: before (display: block; / * відображати елемент як блок * / content: ""; / * вміст псевдоелемента * / width: 100%; / * ширина елемента * /) .item-16by9 (padding-top: 56.25%; / * (9:16) * 100% * /) .item-responsive> .content (position: absolute; / * абсолютне положення елемент * / / * положення елемента * / top: 0; left: 0; right: 0; bottom: 0; background-size: cover! important;)

Більшості елементів в HTML, як правило, присвоюється певна висота і ширина. Задати дані параметри в CSS досить легко, а як результат - практично. Використовуються для цього вже відомі Вам властивості height і width. Однак, в даному уроці ми ще поговоримо про не фіксували ширині і висоті або гумової, тобто в залежності від ширини самого вікна. приступимо)

width

MyBlock (
width: 400px; / * Ширина 400 пікселів * /

}
Або ж у відсотках:

MyBlockPercent50 (
width: 50%; / * Ширина 50% від ширини блоку або вікна (якщо не всередині блоку з фіксованою шириною) * /
color: # f1f1f1; / * Світло-сірий блок * /
}
Відповідно отримуємо блок, який завжди буде по ширині складати половину від батьківського.

Тепер про найцікавіше. У width є такі параметри, які вказують максимальну або мінімальну ширину. Це властивості min-width і max-width відповідно. Вказувати для них значення можна також і в пікселях, і в процентах, і в інших величинах. Дані властивості - це основа для створення гумового і адаптивного дизайнів ().

Приклад адаптивного дизайну. Подивися, змінюючи розміри вікна бразура:

Це я, звичайно, забіг наперед. Але ви повинні розуміти що і навіщо потрібно. Та й помацати приємний результат)

Як Ви вже зрозуміли, за допомогою цих властивостей можна більш гнучко поводитися з елементами на сторінці, не спотворюючи вмісту. Як це працює? Розглянемо код.

Block (
max-width: 800px;
background-color: # f1f1f1; / * Світло-сірий блок * /
padding: 20px;
}
Блок з даними властивостями при ширині батька в 200 пікселів буде приймати відповідне значення, але якщо батьківський блок буде більше, наприклад, 1000 пікселів, то він вже прийме свою максимальну ширину, тобто 800 пікселів. Тобто він буде збільшуватися поки ширина батьківського блоку не буде 801 піксель і більше. Далі блок block завжди матиме свою максимально дозволену ширину в 800 пікселів.

height

Info (
height: 200px; / * Висота блоку буде 200 пікселів * /
padding: 10px; / * Повторюємо про відступи всередині блоку =) * /
}
Що логічно, у висоти можна вказувати мінімальні і максимальні значення висоти для елемента властивостями min-height і max-height відповідно.

Info (
max-height: 360px; / * Максимальна висота блоку * /
min-height: 120px; / * Мінімальна висота блоку * /
}
Як бачите, властивості можна, а часто і потрібно використовувати в парі.
Або комбінувати величини:

Content (
height: 100%; / * Висота завжди буде 100% * /
width: 760px; / * А ось ширина фіксована 760 пікселів * /
}
Якщо залишилися питання, пишіть в коментарях!

Дякую за увагу! Успіхів у верстці!)

Height: 100%

Для відповіді на нього потрібно зрозуміти, що height: 100%дорівнює висоті батьківського елемента. Це не магічне «висота всього вікна». Так що, якщо ви захочете, щоб ваш елемент зайняв всі 100% від висоти вікна, то встановити height: 100%буде недостатньо.

Чому? А тому, що батьком вашого контейнера є елемент body, а у нього властивість height встановлено в auto за замовчуванням; а значить - його висота дорівнює висоті контенту. Звичайно, ви можете спробувати додати height: 100% до body, але цього теж буде недостатньо.

Чому? А все тому ж, батьком елемента body є елемент html, у якого також властивість height одно auto і він також розтягується під розмір контенту. А ось тепер, якщо додати height: 100% і до елементу html, то все запрацює.

Стало зрозуміліше? Кореневий елемент html насправді не самий верхній рівень на сторінці - їм є «viewport». Для простоти, будемо вважати, що це вікно браузера. Так ось, якщо встановити height: 100% елементу html, то це те ж саме, що сказати - стань такої ж висоти, як вікно браузера.

Підсумовуємо отриману інформацію в невеликому клаптику коду:

Html, body, .container (height: 100%;)
Готово. Якщо вам цікаво поглибиться в тему, як влаштований viewport, я настійно рекомендую.

А що якщо у батьківського елементу встановлено властивість min-height, а не height?

Parent (min-height: 300px; height: 1px; / * Required to make the child 100% of the min-height * /) .child (height: 100%;)
Приклад на jsFiddle.

Більш детально, з цим питанням, ви можете ознайомитись в статті Роджера Йохансена (Roger Johansson).

Width: 100%

Дозвольте відкрити вам маленький секрет. width, для цього властивості - не дуже підходящі назву. Властивість width - це не абсолютний розмір елемента, а розмір вмісту елемента і це величезна різниця.

Якщо додати padding і / або border до елементу з width: 100%, То він перестане поміщатися в батьківський елемент. Тому що з'явилися padding і border і ось чому width повинен був називатися content-width. А тепер, будь ласка, подивіться на приклад демонструє вищесказане.

Припустимо, ширина батька 25em, а дочірнього елемента - 100% (від ширини батька) і він також має padding рівний 1em (1em справа і1emслева, всумме2em по горизонталі) і border розміром в 0.5em (0.5 em справа і 0.5 emслева, всумме1em по горизонталі ), що в підсумку нам дає 25em (100%) + 2em + 1em = 28em.

Є 4 можливих шляхи вирішення цієї проблеми. Перший і, напевно, кращий спосіб - уникати властивості width: 100%, Тим більше що в даному випадку воно нікому не потрібне. Якщо дочірній елемент блоковий, то він і так займають всю ширину батька автоматично (без проблем з padding`амі і border`амі). Але якщо ми працюємо з inline-block елементом, то нам не вдасться так просто вирішити цю проблему.

Ми можемо замінити width: 100%на статичний розмір. У нашому випадку 25 - (2 + 1) = 22em. Само собою - це погане рішення, тому що нам потрібно обчислювати ширину вручну. Підемо іншим шляхом!

Третій спосіб - використовувати calc () для розрахунку ширини: width: calc (100% - 3em). Але воно теж не підходить. По-перше, нам все ще потрібно обчислювати розміри padding + border. По-друге, calc () погано підтримується браузерами (не працює в IE 8, Safari 5, Opera 12, рідному браузері Android).

Ідея номер чотири - використовувати властивість box-sizing: border-box. Воно змінює алгоритм розрахунку ширини і висоти елемента так, щоб в них враховувалися властивості padding і border. Відмінна новина, полягає в тому, що у box-sizing хороша підтримка браузерами (IE8 +, Opera 7 +). А для всіх інших браузерів можна використовувати polyfill.

Висновок: не використовуйте width: 100%без box-sizing: border-box.

Як не облажався з z-index.

Для початку. Властивість z-index не має ефекту на статичних елементах. Щоб мати можливість переміщати елемент по осі Z, нам потрібно змінити його позиціонування на relative, absolute або fixed.

Важливо розуміти в z-index те, що не всі елементи в DOM дереві розміщені на одному рівні. Це означає, що зміна z-index у елемента до дуже великого значення, не гарантує того, що він буде поміщений на передній план. Це називається контекстом накладення.

Простими словами, контекст накладення є, свого роду, групою на основі одного html елемента, у якого всі дочірні елементи отримують ту ж позицію в контексті і такий же z-index. Зміни z-index у елемента може привести до перекривання їм інших елементів, так як вам необхідно. Ось як розташовуються елементи в одному контексті накладення (від низу до верху):

1. Фон і межі елементу, що формує контекст
2. Дочірні контексти накладення з негативним z-index (найменший перший)
3. Чи не позиційований елементи
4. Позиційований елементи зі значенням z-index рівним auto або 0
5. Позиційований елементи з позитивним z-index (кожен наступний по порядку розташований вище попереднього, за однакової кількості z-index)

Коли ситуація стає неприємною

Справа в тому, що кожен контекст накладання має свою вісь Z. Наприклад, елемент A в контексті 1 і елемент B в контексті 2 не можуть взаємодіяти через z-index. Це означає, що елемент A, як частина контексту накладення знаходиться в самому низу загального контексту накладення, ніколи не зможе перекрити елемент B іншого контексту, що знаходиться вище рівнем, навіть з дуже великим значенням z-index.

Але, що ще гірше. Елемент html створює кореневої контекст накладання. Потім, кожен не статично-позиційовані елемент із властивістю z-index не рівним auto, також створює свій контекст накладання. Нічого нового. Але ось де все починає валитися: деякі, ніяк не пов'язані з контекстом накладення css властивості, також створюють нові контексти. Наприклад, властивість opacity.

Все вірно, властивість opacity створює новий контекст накладання. Те ж саме роблять властивості transform і perspective. Хоча це не має ніякого сенсу, чи не так? Наприклад, якщо у вас є який-небудь елемент з opacity менше 1 або з будь-якої трансформацією, у вас потенційно може виникнути проблема.

На жаль, кожна проблема з z-index має свій контекст (НЕ каламбур) робить неможливим універсальне рішення.

Давайте підіб'ємо короткий підсумок вищесказаного:

• Перед застосуванням z-index переконайтеся, що встановили властивість position не рівним static
• Не використовуйте більше 5 цифр для значення z-index, це абсолютно безглуздо; в більшості випадків, значення z-index в районі 10, буде більш ніж достатньо
• Переконайтеся, що елемент, який ви хочете перекрити знаходиться в тому ж контексті накладення.
• Якщо у вас все ще щось працює не так, як повинно, переконайтеся у відсутності трансформацій і opacity вище у батьківських елементів.

В тему, я так само рекомендую до прочитання What No One Told You About Z-index від Філіпа Волтон (Philip Walton) і офіційну специфікацію css.

Боротьба зі спаданням відступів

На щастя, як правило, така поведінка і очікується. Можливо, тому воно так і працює (так зазначено в специфікації css). Однак, іноді ви не хочете, щоб вертикальні відступи схлопнулись. Щоб зрозуміти як цього уникнути, ми для початку подивимося, чому так відбувається. Схлопування відступів може статися в трьох різних випадках.

сусідні елементи

• clear: left; float: left; (Right той же працює)
• display: inline-block;

Приклад на jsFiddle ілюструє роботу фіксів.

Батько і перший / останній дочірній елемент

• overflow: hidden (або будь-який інший, але не visible)
• padding: 1px (або інше значення більше 0)
• border: 1px solid transparent (або будь-який інший border)
• float: left (right той же працює)

Приклад на jsFiddle ілюструє роботу фіксів.

порожні блоки

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

Привіт, шановні читачі! Сьогодні ми розглянемо як задавати розміри блокових елементів веб сторінки за допомогою 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 віддає управління розмірами елементу веб-браузеру і є значенням за замовчуванням. У цьому випадку розміри елемента будуть такі, щоб в ньому повністю помістилося весь його вміст.

Розглянемо кілька прикладів.

результат:

У цьому прикладі ми створили блок 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:

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) контенту

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

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

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

результат:

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

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

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

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

результат:

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

Ну а тепер обмежимо у першого абзацу і висоту:

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

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

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

overflow: visible | hidden | scroll | auto | inherit

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

Правило приховує все, що не поміщається в контейнері:

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

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

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

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

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

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

результат:

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

Тому якщо вам, наприклад, потрібно щоб в абзаці горизонтальна прокрутка не з'являлася ніколи, а вертикальна з'являлася тільки в разі потреби, то достатньо написати наступне правило css:

p (overflow-x: hidden; overflow-y: auto;)

І завдання буде вирішена.

На цьому все. До нової зустрічі. Не забудьте підписатися на оновлення блогу і буду вдячний якщо скористаєтеся кнопочками соціальних мереж.

опис

Встановлює висоту блокових або замінних елементів (до них, наприклад, відноситься тег ). Висота не включає товщину меж навколо елемента, значення відступів і полів.

Якщо вміст блоку перевищує зазначену висоту, то висота елемента залишиться незмінною, а вміст буде відображатися поверх нього. Через цю особливість може вийти накладення вмісту елементів один на одного, коли елементи в коді HTML йдуть послідовно. Щоб цього не сталося, додайте overflow: auto до стилю елемента.

синтаксис

height: значення | відсотки | auto | inherit

значення

Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При використанні процентної запису висота елемента обчислюється залежно від висоти батьківського елементу. Якщо батько явно не вказано, то в його якості виступає вікно браузера. auto встановлює висоту виходячи з вмісту елемента

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат даного прикладу показаний на рис. 1.

Мал. 1. Застосування властивості height

об'єктна модель

document.getElementById ( "elementID") .style.height

браузери

Браузер Internet Explorer 6 некоректно визначає height як min-height.

У режимі сумісності (quirk mode) Internet Explorer до версії 8.0 включно неправильно обчислює висоту елемента, не додаючи до неї значення відступів, полів і кордонів.

Internet Explorer до версії 7.0 включно не підтримує значення inherit.