vue растянуть компонент

Question

Всем доброго.

Подскажите как растянуть дочерний компонент во vue на всю ширину и (или) высоту. Процентные единицы не работают.

Answer 1

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

* {
  box-sizing: border-box;
}

.parent-1 {
  /* для примера, задаём явную ширину */
  width: 500px;
}

.child-1 {
  /* делаем блоковым, чтобы width работал по всей строке */
  display: block;
  /* растягиваем на 100% ширины родителя */
  width: 100%;
  /* если хотим, чтобы padding внутри считался в эту 100% */
  box-sizing: inherit; /* или box-sizing: border-box; */
}

.parent-2 {
  display: flex;
}
.child-2 {
  /* растянется по главной оси */
  flex: 1;
}

.parent-3 {
  display: grid;
}

.child-3 {
  width: 100%; /* обычно даже не нужно */
}

.parent-4 {
  height: 400px; /* или любая фиксированная/процентная высота */
}

.child-4 {
  height: 100%;       /* тянется на всю высоту родителя */
  box-sizing: border-box;
}

.parent-5 {
  display: flex;
  flex-direction: column; /* или row, если нужна горизонтальная ось */
  height: 400px;
}

.child-5 {
  flex: 1; /* займет всё доступное место по основной оси */
}

.parent-6 {
  display: grid;
  height: 400px;
}

.child-6 {
  /* по умолчанию растягивается на всю ячейку */
  align-self: stretch;  /* если надо явно указать */
}

<h2>Растягиваем элементы в ширину</h2>

<h3>Вариант 1 (просто два блочных элемента)</h3>
<div class="parent-1" style="background: green;">
  <div class="child-1" style="border: 2px dashed red">
    Контент
  </div>
</div>

<h3>Вариант 2 (Flex)</h3>
<div class="parent-2" style="background: green;">
  <div class="child-2" style="border: 2px dashed red">
    Контент
  </div>
</div>

<h3>Вариант 3 (Grid)</h3>
<div class="parent-3" style="background: green;">
  <div class="child-3" style="border: 2px dashed red">
    Контент
  </div>
</div>

<h2>Растягиваем элементы в высоту</h2>

<h3>Вариант 1</h3>
<!-- если вы используете % у родителя, то у его родителя тоже должна быть задана высота -->
<div class="parent-4" style="background: green;">
  <div class="child-4" style="border: 2px dashed red">Контент</div>
</div>

<h3>Вариант 2 (Flex)</h3>
<div class="parent-5" style="background: green;">
  <div class="child-5" style="border: 2px dashed red">Контент</div>
</div>

<h3>Вариант 3 (Grid)</h3>
<div class="parent-6" style="background: green;">
  <div class="child-6" style="border: 2px dashed red">Контент</div>
</div>

БЛОГ НА HUSL

vue растянуть компонент

Ответы (1 шт):