Как растянуть блок по высоте css: Как растянуть блок по высоте css

html — Растянуть div на всю свободную (максимальную) ширину

Вопрос задан 5 лет 6 месяцев назад

Изменён 5 лет 5 месяцев назад

Просмотрен 28k раз

Есть два блока. Первый блок имеет динамическую ширину, т.е. ширина зависит от содержимого. Второй блок должен быть растянут на всю остальную (свободную) ширину.

.parent {
  border: 2px solid red;
  height: 30px;
  line-height: 26px;
}
.child {
  display: inline-block;
  border: 2px solid blue;
}

<div>
  <div>Содержимое</div>
  <div>Второе содержимое</div>
</div>

Как можно с помощью CSS растянуть второй блок на всю свободную ширину?

• html
• css

2

Знаю два хороших метода, как растянуть второй блок на всю свободную (максимальную) ширину:

1. Современный метод ― с помощью flexbox.

   .parent {
     display: flex;
     border: 2px solid red;
     height: 30px;
     line-height: 26px;
   }
   .child {
     display: block;
     border: 2px solid blue;
   }
   /* Растягиваем второй блок на максимальнуцю ширину */
   .child.max {
     flex: 1;
   }

   <div>
     <div>Содержимое</div>
     <div>Второе содержимое</div>
   </div>

2. Один из необычных методов ― использовать float и overflow. Overflow создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён. Подробнее…

   .parent {
     border: 2px solid red;
     line-height: 26px;
     overflow: auto; /* Это чтобы родитель не терял высоту */
   }
   .child {
     display: block;
     float: left;
     border: 2px solid blue;
   }
   /* Растягиваем второй блок на максимальнуцю ширину */
   .child.max {
     float: none;
     overflow: auto;
   }

   <div>
     <div>Содержимое</div>
     <div>Второе содержимое</div>
   </div>

Уточнение: overflow должен быть единственным в родителе и находится после всех float.

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Простой способ растянуть блок на всю высоту экрана, или CSS3 Viewport Units / Хабр

andrew-r

000Z» title=»2014-11-13, 17:24″>13 ноября 2014 в 17:24

Разработка веб-сайтов *CSS *HTML *

В этой статье я познакомлю вас с появившимися в CSS3 единицами измерения vw, vh, vmin и vmax.

Что такое «Viewport Units»

Viewport Units — это относительные единицы измерения, рассчитывающиеся в процентах от размеров области просмотра браузера. Эти единицы измерения появились в третьей версии спецификации

CSS

.

Единицы измерения vh и vw

vh и vw можно расшифровать, как viewport height и viewport width — высота и ширина области просмотра соответственно. 1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.

Единицы измерения vmin и vmax

vmin и vmax расшифровывается, как viewport minimal и viewport maximal. 1vmin сравнивает значения 1vh и 1vw, выбирая меньшее из них. 1vmax делает то же самое, но выбирает большее из двух значений. Иначе говоря, если у смартфона ширина экрана меньше высоты, то vmin будет рассчитываться относительно ширины, а vmax будет рассчитываться относительно высоты экрана.

Пример использования

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

section {
	height: 100vh; /* высота секции равна высоте области просмотра */
}

Посмотрите демо.

Поддержка браузерами

Довольно много браузеров поддерживают эти единицы измерения, что не может не радовать. С последними версиями Chrome, Safari, Opera и Firefox проблем нет.

IE начиная с девятой версии имеет частичную поддержку. Проблема с мобильными браузерами: Opera Mini вообще не поддерживает эти единицы, Android Browser поддерживает их только с версии 4.4. Ознакомиться с подробной статистикой.

Теги:

• css3
• viewport units
• viewport

Хабы:

• Разработка веб-сайтов
• CSS
• HTML

Всего голосов 55: ↑28 и ↓27 +1

Просмотры

240K

Комментарии 14

Андрей Романов @andrew-r

Разработчик интерфейсов

Сайт ВКонтакте Github Telegram

Комментарии Комментарии 14

css — Как растянуть несколько встроенных блоков, чтобы заполнить все пространство родителя?

Задай вопрос

спросил

6 лет, 5 месяцев назад

Изменено 6 лет, 5 месяцев назад

Просмотрено 2к раз

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

Вот проблема: у меня есть блочный div и переменное количество кнопок, отображаемых как встроенный блок внутри этого div. Я хотел бы, чтобы эти кнопки растягивались равномерно, чтобы заполнить все пространство родителя, например, если у меня есть 3 кнопки, они будут растягиваться до 33% ширины, если 2 — до 50% и так далее.

Можно ли это сделать с помощью чистого CSS? Заранее спасибо.

0

Вы можете использовать css flexbox:

 
  .btn-holder {
  нижняя граница: 15px;
  дисплей: гибкий;
}

кнопка .btn-держателя {
  гибкий рост: 1;
} 

 <дел>
  Кнопка 1
  Кнопка 2
  Кнопка 3

 .контейнер {
  дисплей: таблица;
  ширина: 100%;
}
.контейнер .ячейка {
  отображение: таблица-ячейка;
  граница: сплошная черная 1px;
} 

 2 ячейки
<дел>
  <дел>1
  <дел>2