Почему высота элемента span не соответствует высоте его родительского элемента при использовании свойства height:100%?

Question

Харитон

css , html

Почему высота элемента span не соответствует высоте его родительского элемента при использовании свойства height:100%?

Как я могу настроить высоту каждой вкладки таким образом, чтобы она была одинаковой для всех вкладок и не выходила за пределы родителя при выборе вкладки, а родительский элемент был самым высоким? Требуется, чтобы ширина контейнера была настолько большой, насколько это необходимо для размещения всего контента. Цвет фона должен быть белым для выбранной вкладки. 

https://jsfiddle.net/puq1hwza/1/

```css
body {
  background: blue;
}    

.holder {
  position: relative;
  border: 1px solid #fff;
  background: black;
  width: max-content;
  height: max-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10%;

  label {
    width: max-content;
    height: max-content;
      
    input {
      display: none;
    }
      
    span {
      color: #fff;
      display: flex;
    }
    
    input[name='tab']:checked ~ span {
      background: #fff;
      color: green;
    }
  }
}
```

5 января 2024 г. 10:18

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы `span` занимал 100% высоты родителя, его родитель (в данном случае элемент `label`) должен иметь явно заданную высоту. Просто использование `height: 100%;` не будет работать, если у родителя нет фиксированной высоты или если он не использует свойства, связанные с flexbox или grid, чтобы контролировать высоту своих дочерних элементов.

В вашем примере `label` должен быть растянут на всю высоту родительского блока `.holder`. Чтобы это сделать при использовании flexbox, вы можете добавить `align-items: stretch;` для родителя, чтобы дочерние элементы растянулись на весь доступный размер по высоте.

Далее представлены изменения в CSS, которые позволят высоте `span` соответствовать высоте его родительского элемента:

```css
.holder {
  /* ... остальной код ... */
  align-items: stretch; /* Изменяем center на stretch */
}

label {
  /* Убираем height: max-content, чтобы позволить label растягиваться полностью */
  width: max-content;
  display: flex; /* Добавляем flex, чтобы растянуть span */
  flex-direction: column; /* Делаем содержимое label столбцовым */
}

span {
  /* Убираем display: flex, т.к. теперь мы растягиваем span через label */
  height: 100%; /* Задаем высоту в 100% */
  /* Весь остальной код */
}
```

Также нет необходимости добавлять `height: 100%;` к `span`, если его родитель (`label`) уже растянут на всю высоту блока и `span` является единственным элементом внутри него.

Если вам нужно, чтобы все вкладки имели одинаковую высоту, и эта высота должна быть высотой самой высокой вкладки, вам нужно использовать JavaScript для вычисления максимальной высоты и затем присвоить эту высоту всем вкладкам. CSS самостоятельно не предоставит такой функциональности для элементов, не имеющих общего родителя в DOM, который определит их высоту.

Для белого фона выбранной вкладки у вас уже есть правильные стили:

```css
input[name='tab']:checked ~ span {
  background: #fff; /* Белый фон для выбранной вкладки */
  color: green;
}
```

Убедитесь, что `input` и `span`, которые он переключает, находятся в одном родителе, как это сделано в вашем текущем коде, чтобы использовать смежный селектор `~`.

Answer 2

Ну вот например: