Как изменить высоту блока в css

Как растянуть блок на всю высоту страницы?

Вопрос по CSS . Задача: есть высокий блок-контейнер, он по высоте не помещается на один экран (например, div , в котором много параграфов), надо задать фон этому блоку-контейнеру, чтобы он был закрашен полностью. Нашел вот такое решение: задать всем блокам-родителям height: 100%; , а блоку-контейнеру задать min-height: 100%; . Вот пример:

html, body < height: 100%; >div

 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 

Не понимаю, почему это работает. Похоже на «шаманство». min-height задает минимальную высоту. Получается, что минимальная высота содержимого дива равна 100% высоты содержимого div . Посмотрел в devtools, выяснилось, что div может быть по высоте больше, чем body и html .

Отслеживать
34.4k 15 15 золотых знаков 65 65 серебряных знаков 94 94 бронзовых знака
задан 4 янв 2017 в 13:37
2,049 3 3 золотых знака 18 18 серебряных знаков 35 35 бронзовых знаков
что собственно вам не понятно? как по другому сделать высоту блока на всю страницу?
4 янв 2017 в 13:41
мне не понятно, почему это работает. как связана минимальная высота с высотой на всю страницу?
4 янв 2017 в 13:45

высота родителя — 100% страницы. минимальная высота вашего блока — 100% родителя -> 100% страницы. Можете задать блоку высоту в 100vh, результат будет тот же) про эти единицы измерения можете поискать информацию. ее полно)

4 янв 2017 в 13:53

правильно, а минимальная высота вашего блока — 100% боди — что и есть 100% страницы. Просто для этих целей используйте height: 100vh)

4 янв 2017 в 13:58

высота боди — 100% высоты хтмл, высота хтмл — 100% высоты вьюпорта. а вьюпорт — это область просмотра, а не вся страница

4 янв 2017 в 14:04

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Почему это работает?

Потому что div просто переполняет (вылазит за границы) body и всё. Задавая overflow: hidden; для body мы увидим, что div просто обрезается (если высота экрана небольшая).

html, body < height: 100%; overflow: hidden; >div

 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 
text text text text
 

Как с этим быть?

Это задавание height: 100%; блокам всех уровней вложенности довольно неудобно. Задайте просто нужному вам блоку min-height: 100vh; , где vh — единицы высоты экрана. У body тогда будет по умолчанию height: auto; и body просто будет подстраиваться под содержимое.

Отслеживать
ответ дан 4 янв 2017 в 13:53
Vadim Ovchinnikov Vadim Ovchinnikov
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
спасибо за ответ. не понимаю, как связана минимальная высота с высотой на всю страницу
4 янв 2017 в 14:02

я знаю, что див переполняется. и что при задании overflow: hidden; это переполнение «обрезается». вопрос в том, как див по высоте оказался больше боди и хтмл

4 янв 2017 в 14:14

Да потому что body и html , когда им задают 100% занимают один экран. А div занимает минимум один экран, но может и больше (как в данном случае) при min-height: 100%; .

4 янв 2017 в 14:20
@Dimon Вам помог ответ на вопрос?
4 янв 2017 в 14:24
идею с 100vh подкинули
4 янв 2017 в 15:24

Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:

* < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer

 
 
ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй
 
ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц
 
ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу
 
ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк
 
еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее
 
 
 

При этом min-height: 100% работает ТАК:

1. Если СОДЕРЖИМОГО МАЛО у блока content , то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта ( wrapper — это 100% от высоты body , body — это 100% от высоты html , а html — это 100% от высоты viewport ). При этом у блока content есть нижний paddind -буфер отрицательный, а у блока блока footer есть отрицательный margin , который позволяет в случае, когда много содержимого, «наползти» на этот padding -буфер.
2. Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке content ), то высота определяется содержимым — содержимое растягивает.

Еще раз повторю, чтобы все запомнили — если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше — пожалуйста, если сможешь растянуть содержимым), если много — высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.

Ширина одного div в зависимости от другого

Текст обтекает блок 1 справа. Внутри этого блока находятся блоки 2(картинка) и 3(описание картинки). Как сделать, чтобы блок с описанием становился по ширине таким же как и блок с картинкой?
Размер картинки не фиксирован(картинки могут быть любого размера) и ограничений на количество символов описания нет.

1 2 3 4 5 6

текст div id="1" style="float: left;"> div id="2">img src="картинка">/div> div id="3">описание картинки/div> /div> текст

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

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

HEIGHT одного блока DIV относительно другого
Есть блоки DIV (например main и left), у блока left высота (height) 800px, позиционирование.

Как изменить высоту одного div при изменении высоты другого
Как изменить высоту одного блока div при изменении высоты другого — HTML, CSS. В блоке справа меню.

Регистрация: 27.08.2012
Сообщений: 82

Ну если описание будет шире картинки то он блок растянет, что бы ты не делал, выход делать фиксированную ширину.

div id="1" style="float: left;width:XXXpx;">

Либо прятать их под класс и в CSS прописывать ширину класса
Регистрация: 15.10.2014
Сообщений: 64

Сообщение от thebaron

Ну если описание будет шире картинки то он блок растянет, что бы ты не делал, выход делать фиксированную ширину.

Фиксированную ширину задавать нельзя, т.к. размеры блоков зависят от ширины картинки (а ширина картинки меняется в зависимости от самой картинки).

203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106

Dimento, ну а если текст шире картинки, ты куда его хочешь деть?

Добавлено через 3 минуты

Сообщение от Dimento

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

div id="2">img src="картинка">/div>

и присваивать эту ширину

div id="3">описание картинки/div>

Регистрация: 15.10.2014
Сообщений: 64

Сообщение от Давран

Dimento, ну а если текст шире картинки, ты куда его хочешь деть?

Если описание шире картинки — оно переносится на новую строку.
Да, по всей видимости, только через js или php функцию getimagesize, но думал как-то без этого обойтись..

203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106

Сообщение от Dimento

1 2 3 4

$(document).ready(function(){ var w=$("#2").outerWidth(); $("#3").css({"width":w}); });

Регистрация: 27.08.2012
Сообщений: 82

Если я загружу картинку в over9999 ширину? У тебя редактор по любому должен будет задавать либо автоматически ширину, либо ты её сам указываешь. Туда в редактор(Если таковой будет) и запили переменную, которая потом унаследуется в ширину блока

203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
thebaron, может лучше написать

max-width:900;

например и уже не будет страшна картинка в 9999+px
Регистрация: 27.08.2012
Сообщений: 82

Сообщение от Давран

thebaron, может лучше написать
Код CSS
1
max-width:900;
например и уже не будет страшна картинка в 9999+px

В этом решении(Повторюсь если есть редактор) сделать так куда проще чем подключать дополнительные скрипты

50 / 49 / 10
Регистрация: 27.05.2014
Сообщений: 232
Давран, +

overflow: hidden;

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как изменить высоту одного блока div при изменении высоты другого?
вообщем на странице есть 3 блока div 1 центральный с установленной высотой auto и 2 боковых в.

Необходимо сделать резиновость одного дива в зависимости от другого, Как это реализовать на html и css
Добрый день, уважаемые форумчане! Подскажите, пожалуйста, как сделать верстку в html и css, чтобы.

Размещение нескольких блоков div внутри другого блока div
Хочу сделать шапку веб-страницы. Прикреплю ниже небольшую схему того, как она будет выглядеть. Хочу.

Можно ли задать один блок div относительно другого div-а?
Привет. Пытаюсь сделать слои, по этому примеру. Там они используют абсолютное позиционирование и.

Размеры блочных элементов в CSS

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

При изучении блочной модели CSS мы разобрали, что свойства width и height устанавливают ширину и высоту внутренней области элемента (content area), которая может содержать текст, изображения и прочие элементы.

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

Рис. 99 Схема вычисления общей ширины и высоты элементов.

Общая ширина элемента вычисляется по формуле:

width (ширина) + padding-left (левый внутренний отступ) + padding-right (правый внутренний отступ) + border-left (левая граница) + border-right (правая граница).

Общая высота элемента вычисляется по формуле:

height (высота) + padding-top (верхний внутренний отступ) + padding-bottom (нижний внутренний отступ) + border-top (верхняя граница) + border-bottom (нижняя граница).

Допустим, у нас есть следующие стили для элемента :

div  width: 150px; /* устанавливаем ширину элемента */ height: 150px; /* устанавливаем высоту элемента */ padding: 10px; /* устанавливаем внутренние отступы элемента */ border: 5px; /* устанавливаем границы элемента */ >

Общая ширина элемента:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 5 пикселей (левая граница) + 5 пикселей (правая граница) = 180 пикселей .

Общая высота элемента:

150 пикселей (пользовательское значение высоты) + 10 пикселей (нижний внутренний отступ) + 10 пикселей (верхний внутренний отступ) + 5 пикселей (нижняя граница) + 5 пикселей (верхняя граница) = 180 пикселей .

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

Изменение модели вычисления ширины и высоты элементов

С выходом стандарта CSS 3 добавлено свойство box-sizing, оно позволяет изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.

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

   Пример вычисления ширины и высоты элементов div  display: inline-block; /* устанавливаем элементы 
как блочно-строчные (выстраиваем в линейку) */ width: 25%; /* устанавливаем ширину элемента */ height: 100px; /* устанавливаем высоту элемента */ > .test  background-color: red; /* задаем цвет заднего фона */ > .test2  background-color: green; /* задаем цвет заднего фона */ > .test3  background-color: blue; /* задаем цвет заднего фона */ > .test4  background-color: yellow; /* задаем цвет заднего фона */ >  /* обязательно прочтите пояснение ниже */ 
class = "test">
class = "test2">
class = "test3">
class = "test4">
   

Обратите внимание на важный момент — все четыре блока размещены в одну строчку.

Это очень тонкий момент, дело в том, что когда вы используете display: inline-block браузер расценивает переносы строки как пробельный символ, и как следствие, добавляет после каждого блока 3-4px пустого пространства в зависимости от браузера и шрифта пользователя. По сути это является междусловным интервалом, так как блок расценивается в данном случае как слово. Может на данном этапе этот момент для вас не до конца понятен, просто запомните его, чтобы в последствии случайно не потерять пару часов, когда у вас будет «съезжать» какой-то блок, или список в панели навигации из-за вдруг появившихся «не понятно откуда пикселей». Я человек простой: вижу непонятные пиксели при display: inline-block – пишу элементы в линейку без пробелов.

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

А теперь техническое задание поменялось, и Вам необходимо к каждому нечетному блоку добавить сплошную границу справа размером 5px. Для этого мы создадим следующий стиль:

div:nth-child(odd)  /* выбираем каждый нечетный блок внутри родительского элемента */ border-right: 5px solid; /* добавляем сплошную границу справа размером 5px */ > 

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

   Пример вычисления ширины и высоты элементов в процентах div  display: inline-block; /* устанавливаем элементы 
как блочно-строчные (выстраиваем в линейку) */ width: 25%; /* устанавливаем ширину элемента */ height: 100px; /* устанавливаем высоту элемента */ > div:nth-child(odd)  /* выбираем каждый нечетный блок внутри родительского элемента */ border-right: 5px solid; /* добавляем сплошную границу справа размером 5px */ > .test  background-color: red; /* задаем цвет заднего фона */ > .test2  background-color: green; /* задаем цвет заднего фона */ > .test3  background-color: blue; /* задаем цвет заднего фона */ > .test4  background-color: yellow; /* задаем цвет заднего фона */ >  
class = "test">
class = "test2">
class = "test3">
class = "test4">
   

Как вы можете заметить на изображении ниже, нас ждет разочарование, так как наш макет «поплыл»:

Какие у нас есть варианты, чтобы исправить наш макет?

Варианта два:

1. Первый – брать в руки калькулятор и высчитывать проценты, которые стали занимать элементы в нашем документе.
2. Второй – использовать альтернативную модель вычисления ширины и высоты элементов.

В нашем случае я считаю, что необходимо выбрать второй вариант:

   Пример использования свойства box-sizing div  display: inline-block; /* устанавливаем элементы 
как блочно-строчные (выстраиваем в линейку) */ width: 25%; /* устанавливаем ширину элемента */ height: 100px; /* устанавливаем высоту элемента */ box-sizing: border-box; /* изменяем модель вычисления ширины и высоты элементов */ > div:nth-child(odd)  border-right: 5px solid; /* к каждому нечетному блоку добавляем сплошную границу справа черного цвета размером 5px. */ > .test  background-color: red; /* задаем цвет заднего фона */ > .test2  background-color: green; /* задаем цвет заднего фона */ > .test3  background-color: blue; /* задаем цвет заднего фона */ > .test4  background-color: yellow; /* задаем цвет заднего фона */ >  
class = "test">
class = "test2">
class = "test3">
class = "test4">
   

Мы использовали CSS свойство box-sizing со значением border-box , что позволило нам изменить модель вычисления ширины и высоты элементов.

Отличительная особенность данной модели заключается в том, что значения свойства ширины (width) и высоты (height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding).

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

Для окончательного понимания этой модели вычисления ширины и высоты элементов, закрепим полученные знания на следующем примере:

   Пример изменения модели вычисления ширины и высоты элементов div  display: inline-block; /* устанавливаем элементы как блочно-строчные (выстраиваем в линейку) */ width: 150px; /* устанавливаем ширину блока */ height: 150px; /* устанавливаем высоту блока */ margin: 10px; /* устанавливаем внешний отступ для всех сторон */ padding: 10px; /* устанавливаем внутренний отступ для всех сторон */ border: 10px solid orange; /* устанавливаем сплошную границу 10px оранжевого цвета */ background: khaki; > .test  box-sizing: content-box; /* ширина и высота элемента включают в себя только содержание элемента (по умолчанию) */ > .test2  box-sizing: border-box; /* ширина и высота элемента включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */ >  class = "test">content-box class ="test2">border-box  

Значение content-box свойства box-sizing является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 10 пикселей (левая граница) + 10 пикселей (правая граница) = 190 пикселей .

Что касается второго элемента, к которому мы применили свойство box-sizing со значением border-box , то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства box-sizing со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.

Результат нашего примера:

Управление переполнением блочных элементов

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

Значение	Описание
visible	Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hidden	Переполнение обрезается (контент, который выходит за размеры будет невидимым).
scroll	Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
auto	Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.

Давайте рассмотрим следующий пример:

   Пример управления переполнением элемента div  display: inline-block; /* устанавливаем элементы как блочно-строчные (выстраиваем в линейку) */ width: 125px; /* устанавливаем ширину блока */ height: 100px; /* устанавливаем высоту блока */ padding: 5px; /* устанавливаем внутренний отступ для всех сторон */ border: 1px solid orange; /* устанавливаем сплошную границу 1px оранжевого цвета */ vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента в строке (вертикальное позиционирование) */ > .test  overflow: visible; /* переполнение не обрезается */ > .test2  overflow: hidden; /* переполнение обрезается */ > .test3  overflow: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */ > .test4  overflow: auto; /* если переполнение обрезается, то полоса прокрутки будет добавлена автоматически */ >  class = "test"> overflow: visible Съешь же ещё этих мягких французских булок да выпей чаю. class = "test2"> overflow: hidden Съешь же ещё этих мягких французских булок да выпей чаю. class = "test3"> overflow: scroll Съешь же ещё этих мягких французских булок да выпей чаю. class = "test4"> overflow: auto Съешь же ещё этих мягких французских булок да выпей чаю.  

В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow:

• Первый блок (значение visible ) – содержимое выходит за границы элемента (значение по умолчанию).
• Второй блок (значение hidden ) – содержимое, которое переполняет элемент обрезается.
• Третий блок (значение scroll ) – переполнение обрезается, но добавляется полоса прокрутки.
• Четвертый блок (значение auto ) – как и при значении scroll , только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x — горизонтальной, либо y — вертикальной), а не отображается на странице постоянно.

Результат нашего примера:

Переполнение по определённой оси

С выходом стандарта CSS 3 были добавлены свойства, которые способны управлять по отдельности горизонтальным переполнением (ось x) – overflow-x и вертикальным переполнением (ось y) – overflow-y . В отличии от свойства overflow, данные свойства отвечают только за одну ось (x, либо y) при этом значения и синтаксис аналогичен свойству overflow (таблица выше).

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

   Пример управления переполнением элемента по горизонтальной оси pre  width: 300px; /* устанавливаем ширину элемента */ overflow-x: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */ background-color: orange; /* задаем цвет заднего фона */ >  Съешь же ещё этих мягких французских булок да выпей чаю.  

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

Результат нашего примера:

Минимальные и максимальные значения ширины и высоты блочного элемента

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

CSS, помимо явного указания значений ширины и высоты элементов (свойства width и height) предлагает такие свойства, которые позволяют указать для блочных элементов их минимальные, либо максимальные значения:

• min-width (устанавливает минимальную ширину элемента).
• max-width (устанавливает максимальную ширину элемента).
• min-height (устанавливает минимальную высоту элемента).
• max-height (устанавливает максимальную высоту элемента).

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

   Минимальная высота и максимальная ширина для блочных элементов :root  /* псевдокласс :root определяет корневой элемент документа */ background-color: black; /* задаем цвет заднего фона */ > html  height:100%; /* задаем высоту элемента в процентах */ background-color: white; /* задаем цвет заднего фона */ > body  margin: 0 auto; /* задаем внешние отступы элемента (0 для верха и низа, автоматически слева и справа) */ max-width: 800px; /* задаем максимальную ширину элемента в пикселях */ height: 100%; /* задаем высоту элемента в процентах */ > div  min-height: 100%; /* задаем минимальную высоту элемента в процентах */ >   

Какие приёмы CSS надо обязательно уяснить из этого примера:

1. Как установить высоту элемента 100% при любом разрешении? Для начала мы должны установить для родителя элемента размер высоты 100% . В нашем случае необходимо установить 100% для элементов и , и только после этого мы устанавливаем для нашего блока размер минимальной высоты 100% (min-height). В итоге это приводит к тому, что у нас даже пустой блок растягивается на весь экран.
2. Как горизонтально центрировать страницу? Для этого необходимо установить внешние отступы элемента сверху и снизу равными 0 (нулю), а слева и справа установить как auto (автоматически):

margin: 0 auto;

В нашем случае мы центрируем страницу, используя такой стиль для элемента .
Кроме того, мы указываем для элемента максимальное значение ширины равной 800px (если разрешение экрана не будет вмещать 800px , то значение будет равно размеру экрана браузера (меньше этого числа), но элемент в котором установлен максимальный размер не может растянуться больше этого числа).
Например, если бы мы указали min-width: 100px , то это бы означало, что элемент не может быть меньше чем 100px (если экран будет меньше, то браузер добавит полосу прокрутки).

Как установить стиль, который будет приоритетней элемента ? Псевдокласс :root , как и селектор типаhtml делают одно и тоже (выбирают одни и те же элементы), но псевдокласс :root обладает более высокой специфичностью (болеее значимый при определении стиля). Вы можете использовать такой прием в будущем для установки изображений в качестве заднего фона. Подробное изучение работы с задним фоном мы рассмотрим далее в учебнике в статье «Работа с фоном элемента в CSS».

Результат нашего примера приведен на изображении ниже:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

• Используя полученные знания составьте следующий документ, посвященный белому тигру (внимательно изучите страницу перед выполнением):

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

  Тень элемента в CSS
  Плавающие элементы в CSS

  © 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

  Кажется, вы используете блокировщик рекламы 🙁

  Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

  Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

  Как изменить размер в css

  

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

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

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

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

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

  

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Как задавать в css размер блока

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

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

  

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

  

  Практический курс по верстке адаптивного сайта с нуля!

  Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

  

  Практический курс по верстке адаптивного сайта с нуля!

  Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

  Ширина (width) и высота (height) в HTML

  Максимальная и минимальная ширина (max-width и min-width)

  Максимальная и минимальная высота (max-height и min-height)

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

  Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код: Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки: Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.

  По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.

  Функция scale()

  С помощью функции scale() свойства transform можно увеличивать и уменьшать объекты на веб-странице. Принцип работы заключается в масштабировании элемента по горизонтали и вертикали с указанием коэффициента масштабирования. Пример:

  

  В начале темы, когда мы рассказывали о свойстве transform в целом, упоминалось, что трансформированные элементы могут накладываться на соседние. Наиболее наглядно показать это позволяет именно функция scale().

  Параметры функции

  В качестве параметров функция scale() принимает целые и дробные числа. Для пропорционального масштабирования достаточно указать нужное число в скобках. Так, число выше единицы увеличит масштаб, а число в диапазоне от 0.01 до 0.99 уменьшит его. Число 1 никак не масштабирует элемент, а число 0 приведет к визуальному исчезновению элемента.

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

  

  Отдельные функции для каждой оси

  В CSS также имеется набор функций для управления масштабированием каждой из трех осей по отдельности — X, Y и Z. Называются они соответственно:

  • scaleX() — масштабирование по горизонтали X;
  • scaleY() — масштабирование по вертикали Y;
  • scaleZ() — масштабирование по оси Z.

  В качестве параметра принимаются те же числа, что и для основной функции.

  Отрицательные числа в параметрах

  Вы можете добиться эффекта «отражения в зеркале», если примените отрицательное число в качестве коэффициента масштабирования. При этом флип произойдет даже в том случае, если вы используете -1 (просто не будет эффекта масштабирования):

  

  При использовании свойства transform на практике не забывайте про вендорные префиксы для обеспечения наилучшей кроссбраузерности.

  Похожие публикации:

  1. Как размыть задний фон css
  2. Как расположить кнопку по середине css
  3. Как расположить элементы друг под другом css
  4. Как растянуть карту на всю ширину в css
  Читать:

  Truedepth камера ошибка как починить