В чем проблема блоку определить доступную высоту?
Почему блок list, не занимает доступную высоту блока info?
Если блоку info задать высоту, то все будет работать как надо, а мне хочется чтобы блок info занимал доступную высоту.
Подскажите пожалуйста в чем причина?
snippet
Дополнительно:
потому что у тебя у блока info стоит flex-direction: column; ( вертикальная ось ) в которой за расположением высоты элементов уже отвечает justify-content - а значение по умолчанию у justify-content является flex-start, по факту если указать блоку info justify-content: stretch он должен элементы флекс контенера распределить так что бы высота у элементов занимала всё пространство, но по какой-то причине этой магии не происходит, зато если указать блоку .list явно что он должен занимать пространство всё относительно свой оси, а если он является вертикальная то flex: 1 1 0; - даст блоку возможность занимать всю высоту
- Интересно, попробовала вариант с justify-content: stretch он почему то не сработал.
а flex: 1 1 0; сработал.
Куда нужно именно добаваить justify-content: stretch? в info? - nikmil, да, должно сработать хм
- nikmil, либо justify-content: stretch для info, либо для list flex: 1 1 0;
- szQocks, все равно интересно как тут сработает justify-content: stretch, или ему что- то мешает?
В любом случае спасибо большое за разъяснение! - nikmil, немного не понял, что мешает ? он работает не так как надо ?
- szQocks, да он (justify-content: stretch) не срабатывает
- szQocks, codepen обновила, добавила в info
- nikmil, да действительно justify-content: stretch не работает, но по факту должен работать
но сам же justify-content - если ось является вертикальной - уже отвечает за расположение элементов по высоте контейнера, так что с этим я был прав, а на счёт justify-content: stretch - нет, исправлю ответ
- nikmil, тут кстати вообще мой ответ не к месту, потому что если бы я не тупил то понял бы что и высота работает вахха) , но мой ответ больше относится к проблеме которая связана с максимальной-высотой
вот тут он будет в самый раз, потому что например в это примере нельзя установить высоту, и тут этой приём в самый раз подходит который я тут в ответе посоветовал
ладно уж удалять ответ не буду, пусть будет отметкой той - как набирался опыта, в проверке своих знаний, со своим тупизмом
- szQocks, в любом случае спасибо за правильное решение и за ваш ответ. Очень было полезно!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для определения доступной высоты блока на веб-странице можно использовать различные методы, в зависимости от конкретной ситуации. Вот несколько способов, которые могут помочь в решении этой проблемы:
1. Использование JavaScript: Вы можете использовать JavaScript для определения высоты блока на странице. Например, вы можете использовать метод `clientHeight` для определения высоты видимой части блока. Пример кода на JavaScript:
var block = document.getElementById("myBlock"); var height = block.clientHeight; console.log("Высота блока: " + height);
2. Использование CSS: Если вы знаете структуру вашего документа и точно знаете, какие элементы влияют на высоту блока, вы можете использовать CSS для определения высоты блока. Например, вы можете использовать свойство `height` для задания конкретной высоты блока. Пример кода на CSS:
#myBlock { height: 300px; }
3. Использование jQuery: Если вы работаете с jQuery, вы можете использовать его методы для определения высоты блока. Например, вы можете использовать метод `height()` для получения высоты блока. Пример кода на jQuery:
var height = $("#myBlock").height(); console.log("Высота блока: " + height);
4. Использование PHP: Если вам нужно определить высоту блока на сервере, вы можете использовать PHP. Например, вы можете передавать высоту блока как параметр в ваш скрипт PHP и обрабатывать её там. Пример кода на PHP:
$height = $_GET['height']; echo "Высота блока: " . $height;
Надеюсь, эти примеры помогут вам определить доступную высоту блока на вашей веб-странице. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.