Почему высота span не такая как у родителя при height:100%?
Привет у меня есть переключатель вкладок, однако я хочу что б высота каждого елемента при включенной вкладке (белом бекгранде) была у всех вкладок одинаковая и не выходила за предел родителя, родитель должен быть как максимальный елемент по высоте
ширина макс контент
https://jsfiddle.net/puq1hwza/1/
<div class="holder"> <label> <input type="radio" name="tab" value="0" /> <span>Lorem</span> </label> <label> <input type="radio" name="tab" value="1" /> <span>isput</span> </label> <label> <input type="radio" name="tab" value="2" /> <span>long text here</span> </label> <label> <input type="radio" name="tab" value="3" /> <span>dolorsitamet</span> </label> </div> |
<div class="holder"> <label> <input type="radio" name="tab" value="0" /> <span>Lorem</span> </label> <label> <input type="radio" name="tab" value="1" /> <span>isput</span> </label> <label> <input type="radio" name="tab" value="2" /> <span>long text here</span> </label> <label> <input type="radio" name="tab" value="3" /> <span>dolorsitamet</span> </label> </div>
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; } } } |
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; } } }
Дополнительно:
1. jsfiddle не работает в России. Переложите на codepen.io, если хочется, чтобы мы посмотрели.
2. В приложенном к вопросу коде вообще нет ничего с чего бы спан стал как label и нет ничего с чего бы все label были бы одинаковыми. (label могли бы, если бы вы перестали задавать им высоту)
Выводы:
- Убрать вертикальное центрирование у holder.
- Убрать высоту у label
- Задать высоту 100% для span
- Задать центрирование для span
Ответы:
Ну вот например:
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, связана с тем, что у элемента span не устанавливается высота 100% относительно его родителя. Это происходит потому, что у элемента span по умолчанию не задано свойство display: block, которое позволяет элементу занимать всю доступную ширину родителя.
Чтобы исправить эту проблему, вам необходимо явно указать для элемента span свойство display: block. Таким образом, элемент span будет вести себя как блочный элемент и займет всю доступную высоту своего родителя.
Пример кода на языке PHP:
.parent { height: 200px; background-color: lightblue; position: relative; } .child { display: block; height: 100%; background-color: lightcoral; } <div class="parent"> <span class="child">Этот текст будет занимать всю высоту своего родителя</span> </div>.parent { height: 200px; background-color: lightblue; position: relative; } .child { display: block; height: 100%; background-color: lightcoral; } <div class="parent"> <span class="child">Этот текст будет занимать всю высоту своего родителя</span> </div>
В данном примере мы создали родительский элемент с классом "parent" и дочерний элемент span с классом "child". Установив для элемента span свойство display: block, мы гарантируем, что он будет занимать всю доступную высоту своего родителя.
Таким образом, проблема с высотой элемента span должна быть успешно решена благодаря установке правильного значения свойства display.