Как в css задать высоту блока

HTML\CSS → Высота блока div в процентах

Проценты % при задании высоты height блока — не работают. Проценты работают только при задании ширины. Точнее свойство height, указанное в %, работает если для внешнего блока указана высота.

Существует правило:

Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height: auto. Кроме случая, когда у элемента стоит position: absolute.

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

Чтобы блок был 100% высоты области просмотра height: 100%, всем его родительским элементам (например html и body) тоже должна быть задана 100% высота.

Задание размеров блоков CSS

Размеры блоков CSS

Общий размер любого блока складывается из нескольких значений свойств. Которые можно рассмотреть на схеме:

• Основной размер блока (в нем расположен основной контент блока - изображение, видео, текст или всё сразу) задается с помощью css свойств width (ширина) и height (высота блока)
• Далее вокруг основного блока идут поля (внутренний отступ - padding) с помощью них мы задаем отступ основного контента от краев рамки
• Следующий слой - border (рамка) не трудно догадаться за что отвечает данное свойство
• Последний слой из которого состоит общий размер блока - это внешний отступ margin с помощью этого CSS свойства задается отступ между блоками

Задание размеров блоков

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

Мы можем указывать значения высоты и ширины через константы с еденицами измерения, такими как px и т.п. Также можно указать с помощью процентов и вычислений calc. 

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

Если у вас есть область в 800 px, и вы хотели бы разместить в ней 2 элемента, разделяющую эту область поровну, то CSS правила

.item{ width:50%; padding:20px; border:1px; margin:0px; }

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

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

.item{ box-sizing:border-box; /**/ width:50%; padding:20px; border:1px; margin:0px; }

Если применить блоку css правило box-sizing:border-box, то тогда у нас нет необходимости рассчитывать внутренние отступы и рамку, т.к. в этом случае они будут входить в значение width и мы можем спокойно расставлять внутренний отступ и рамку как нам необходимо, не боясь что блоки не поместятся. Но в это правило не вписывается свойство margin. По этому, если вам необходимо будет добавлять внешний отступ между элементами, то тогда рассчитывайте сколько вам необходимо будет вычесть из свойства width;

Примечание:Если у вас не работает данное свойство в браузере Chrome, то допишите еще для него это правило отдельно

-webkit-box-sizing:border-box;

Урок: ширина и высота в css

6 Сен 2015 Большинству элементов в HTML, как правило, присваивается определённая высота и ширина. Задать данные параметры в CSS достаточно легко, а как результат - практично. Используются для этого уже известные Вам свойства height и width. Однако, в данном уроке мы ещё поговорим о не фиксированной ширине и высоте или резиновой, то есть в зависимости от ширины самого окна. Приступим)

width

Это свойство устанавливает определённую ширину HTML элемента. Значение может быть указано в пикселях, процентах (другие величины используются реже). .myBlock { width:400px;/* ширина 400 пикселей */ color:#f1f1f1; /* светло-серый блок */ } Или же в процентах: .myBlockPercent50 { width:50%;/* ширина 50% от ширины блока или окна (если не внутри блока с фиксированной шириной) */ color:#f1f1f1; /* светло-серый блок */ } Соответственно получаем блок, который всегда будет по ширине составлять половину от родительского. Теперь о самом интересном. У width есть такие параметры, которые указывают максимальную или минимальную ширину. Это свойства min-width и max-width соответственно. Указывать для них значения можно также и в пикселях, и в процентах, и в других величинах. Данные свойства - это основа для создания резинового и адаптивного дизайнов ().

Пример адаптивного дизайна. Посмотри, изменяя размеры окна бразура:

Это я, конечно, забежал вперёд. Но вы должны понимать что и зачем нужно. Да и потрогать приятный результат) Как Вы уже поняли, с помощью этих свойств можно более гибко обращаться с элементами на странице, не искажая содержимого. Как это работает? Рассмотрим код. демо:

http://tradebenefit.ru/tbtemplates/adaptive-responsive-design/index.html

.block { max-width:800px; background-color:#f1f1f1; /* светло-серый блок */ padding:20px; } Блок с данными свойствами при ширине родителя в 200 пикселей будет принимать соответствующее значение, но если родительский блок будет больше, например, 1000 пикселей, то он уже примет свою максимальную ширину, то есть 800 пикселей. То есть он будет увеличиваться пока ширина родительского блока не будет 801 пиксель и больше. Далее блок block всегда будет иметь свою максимально разрешённую ширину в 800 пикселей. демо: http://tradebenefit.ru/examples/css015.html

height

Это свойство отвечает за высоту элемента. В качестве величины используются всё те же пригодные для CSS. Чаще всего те же проценты и пиксели. .info { height:200px;/* высота блока будет 200 пикселей */ padding:10px;/* повторяем про отступы внутри блока =) */ } Что логично, у высоты можно указывать минимальные и максимальные значения высоты для элемента свойствами min-height и max-height соответственно. .info { max-height:360px;/* максимальная высота блока */ min-height:120px;/* минимальная высота блока */ } Как видите, свойства можно, а зачастую и нужно использовать в паре. Или комбинировать величины: .content { height:100%;/* высота всегда будет 100% */ width:760px;/* а вот ширина фиксированная 760 пикселей */ } Если остались вопросы, пишите в комментариях! Спасибо за внимание! Успехов в вёрстке!)

Основной источник >тут

---

Смотрите также

• 
  Как в таблице word поменять столбцы местами
• 
  Как изменить ширину строки в таблице word
• 
  Как объединить отдельные документы word в один документ
• 
  Как закрепить строку в word на каждой странице
• 
  Как убрать все гиперссылки в word
• 
  Как изменить размер страницы в word
• 
  Как открыть rtf в word
• 
  Как вставить печать в документ word
• 
  Word как применить шаблон к документу
• 
  Как в word вставить выпадающий список
• 
  Как в word 2010 изменить параметры страницы