Фоновое изображение не растягивается до полной высоты контейнера в Firefox / IE / Edge - PullRequest
Новая
       59

Фоновое изображение не растягивается до полной высоты контейнера в Firefox / IE / Edge

0 голосов
/ 08 сентября 2018

У меня проблемы с тем, что браузеры 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>&nbsp;</p>
     <p>&nbsp;</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%, но это тоже не сработало.

1 Ответ

0 голосов
/ 10 сентября 2018

Я пытаюсь сделать тест с вашим кодом с помощью Edge и Chrome.

Я получил одинаковые результаты в обоих браузерах.

Ниже приведен мой результат тестирования с использованием Chrome.

enter image description here

Ниже приведены результаты моего тестирования с использованием Edge.

enter image description here

Можете ли вы показать нам свой вывод в разных браузерах. Так что мы можем увидеть проблему там на вашей стороне.

Затем мы можем снова попытаться предоставить вам предложение для решения проблемы.

Привет

Дипак

...