У меня проблемы с тем, что браузеры Firefox / IE / Edge не читают процентную высоту так же, как Chrome.
Я хочу, чтобы мой элемент figure растягивался на всю высоту своего контейнера, всякий раз, когда к элементу Div, который находится рядом с элементом figure, добавляется больше содержимого.
Вот HTML:
<article class="TextAndImage">
<a href="someLink">
<figure class="col-xs-12 col-md-6 pull-left noPaddingLeft" style="background-image: url("image1.jpg");"><img width="960" class="img-responsive " src="blabla"></figure>
</a>
<div class="pullRight textDiv">
<p> </p>
<p> </p>
<h2>SomeHeading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. pharetra</p>
<p class="pButton">
<a class="btn btn-default" href="someLink" value="">Click Me</a>
</p>
</div>
</article>
CSS:
article.TextAndImage {
display: table;
height: 100%;
}
figure {
background-size: cover;
background-position: center center;
display: table-cell;
height: 100%;
min-height: 300px;
}
div.textDiv [
display: table-cell;
height: 100%;
}
В Chrome изображение всегда растягивается на полную высоту, когда в элементе textDiv больше текста. В других браузерах они игнорируют свойство процентной высоты, и изображение не растягивается. При поиске других решений в переполнении стека была возможность установить значение body и высоту html на 100%, но это тоже не сработало.