Несколько вложенных элементов внутри div с фиксированной высотой
<div id=“maincontainer”>
<div>Some data</div>
<div id = "imagecontainer"> My image is here</div>
<div id = “button-row”>
<button id=“imagebutton” class = "selected" type = "button">Image</button>
<button id=“videobutton” type = "button">Video</button>
</div>
</div>
Мой родительский div #maincontainer имеет фиксированную высоту - 200 px и ширину.
Вероятно, фиксированная высота не является хорошей практикой, однако мне это необходимо для решения другой проблемы.
Как сделать так, чтобы все дочерние элементы помещались в этот контейнер?
Прежде чем установить размер 200 px, все дочерние элементы хорошо вписались в #maincontainer. Однако после установки фиксированной высоты я вижу, что мои #imagecontainer и #button-row переполняют родительский контейнер.
Нужно ли устанавливать высоту для всех дочерних элементов?
Что делать, если у меня есть несколько вложенных дочерних контейнеров внутри моего основного контейнера?
Вам придется ограничить общую высоту ваших детей или сделать основной контейнер прокручиваемым.
Ответы 2
Это легко, мы можем зафиксировать все внутренние элементы под основным div.
Первый шаг: добавьте свойство относительной позиции во внешний div.
Второй шаг: добавьте абсолютную позицию в каждый внутренний div (элементы), который вы хотите исправить.
Необходимо добавить абсолютную позицию для всех дочерних элементов родителя? Или для вложенных? когда у дочернего элемента есть еще один ребенок?
Вы можете сделать его гибким контейнером;
.maincontainer{
display: flex;
flex-flow: column nowrap;
}
Затем отрегулируйте flex-shrink для трех внутренних элементов div в зависимости от того, какой из них вы хотите сжать.
Например, вы хотите, чтобы все изображения были одинакового размера. Если это так, вы можете сделать:
.img-container{
flex: 0 0 75px;
}
.img-container img{
height: 100%;
}
Но первый div сжимается, чтобы соответствовать:
.some-data-div{
flex: 1 1 auto;
}
Вложенные элементы div внутри вас также могут создавать гибкие контейнеры, в зависимости от того, что они из себя представляют и что они содержат. Вы также можете сделать все это сеткой CSS. Если вы создаете определенное пространство (в отличие от того, чтобы позволить ему перетекать в необходимое пространство), вам, вероятно, потребуется определить, как именно будет использоваться это ограниченное пространство. Так что да, вам, возможно, придется определить высоту или максимальную высоту нескольких элементов.
Можем ли мы получить скриншот до и после применения высоты 200 пикселей?