У меня есть три блока с шириной 30% которые стоят в ряд при помощи:
display: flex;
justify-content: space-between;
Выглядит это так ( JSFiddle: https://jsfiddle.net/YuriiSpace/u96L4x01/ ):
Каждый блок имеет по три дочерних блока:
<div class="box-header"> This is static HEADER </div>
<div class="box-main"> This is main content with dynamic char... </div>
<div class="box-footer"> This is static FOOTER </div>
header и footer имеют указанную высоту, а блок main изменяет высоту в зависимости от контента.
Как сделать так, чтобы высота блокa main занимала остальное все доступное место в блоке и footer на всех блоках был внизу (не учитывая сколько контента в блоке main )
Этот пример на JSFiddle: https://jsfiddle.net/YuriiSpace/u96L4x01/
Желательно чтобы решение было кроссбраузерно.
.container {
width: 1024px;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
.box-container {
width: 30%;
height: auto;
border: 2px solid gray;
display: flex;/* Раз */
flex-direction: column;/*Два*/
}
.box-header {
width: 100%;
height: 30px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 22px;
border-bottom: 1px solid lightgray;
background: rgb(230, 255, 230);
}
.box-main {
padding: 10px;
flex: 1 0 auto;/*Три*/
background: rgb(255, 255, 230);
}
.box-footer {
width: 100%;
height: 30px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 22px;
border-top: 1px solid lightgray;
background: rgb(230, 247, 255);
}
<div class="container">
<div class="box-container">
<div class="box-header">This is static HEADER</div>
<div class="box-main"><b>This is main content with dynamic char. </b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aliquid autem alias iste error quasi porro vitae.
</div>
<div class="box-footer">This is static FOOTER</div>
</div>
<div class="box-container">
<div class="box-header">This is static HEADER</div>
<div class="box-main"><b>This is main content with dynamic char. </b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius saepe ratione, expedita commodi, explicabo harum laborum quos quam dolorem fugit perferendis rerum magni ducimus itaque quis officia tenetur
cum. Doloremque magni ad illo libero minima maiores cumque, eius expedita quibusdam vero, ea dolore aliquid fuga porro sapiente explicabo molestiae. Et?
</div>
<div class="box-footer">This is static FOOTER</div>
</div>
<div class="box-container">
<div class="box-header">This is static HEADER</div>
<div class="box-main"><b>This is main content with dynamic char. </b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta veritatis vel, perspiciatis sequi dolores dicta debitis, earum dolore placeat repudiandae illo aspernatur eum illum provident culpa iusto
ducimus maxime odit.
</div>
<div class="box-footer">This is static FOOTER</div>
</div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Обычное поведение текста, если он больше чем размер ограничивающего div и добавлены свойства white-space: nowrap; overflow: hidden; - текст выходит за границу...
У меня на сайте есть карта от 2гисИ нужно сделать скрин этого блока с картой на js, решил использовать библиотеку html2canvas и когда скрипт это делает...
Если есть ссылка на конкретную реализацию, буду признателенВообще меня интересует какие подходы есть к этому вопросу, чтобы контент на странице...