Высота адаптивного контейнера - PullRequest
Новая
       0

Высота адаптивного контейнера

1 голос
/ 11 апреля 2020

Я посмотрел свой случай (float / clearfix, относительный родительский / абсолютный потомок), но я не нашел никакого отражения в следующей проблеме:

В гибкой среде есть три <div 2>, которые имеют одинаковой высоты (благодаря гибкости), каждый из них содержит три элемента (<div 3> + <p> + <a>), <p> имеет поле сверху и снизу, а последнее достаточно большое, чтобы иметь возможность чтобы оставить место для <a>, который находится в абсолютной позиции, прикрепленной к нижней части родительского элемента <div 2>.

Вот пример ( На Jsfiddle ): 

#accueilBloc2 {
  background-color: #FFF;
  text-align: center;
}

#accueilBloc2>div {
  max-width: 1200px;
  width: 100%;
  display: inline-block;
  padding: 8rem 0 12rem;
}

#accueilBloc2>div>div {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#accueilBloc2>div>div>div {
  box-sizing: border-box;
  width: 33.33333333%;
  padding: 1rem;
}

#accueilBloc2>div>div>div>div {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
}

#accueilBloc2>div>div>div>div>div.icon {
  position: relative;
  z-index: 10;
  padding: 0.5rem;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-bottom: -50px;
}

#accueilBloc2>div>div>div>div>div.bloc {
  padding: 6rem 3rem 3rem;
  box-sizing: border-box;
  background-color: #F6F6F6;
  flex-grow: 1;
  width: 100%;
  border: 1px solid #919191;
  padding: 6rem 3rem 3rem;
}

#accueilBloc2>div>div>div>div>div.bloc>div {
  position: relative;
  height: 100%;
}

#accueilBloc2 div.titre {
  font-family: Quicksand, sans-serif;
  font-size: 1.6rem;
  line-height: 2rem;
}

#accueilBloc2 p {
  font-family: Quicksand, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin: 2rem 0 8rem;
}

#accueilBloc2 a {
  font-size: 1.3rem;
  text-transform: uppercase;
  background-color: #FFF;
  display: block;
  border: 1px solid #111;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: Quicksand, sans-serif;
}

#accueilBloc2 a:hover,
#accueilBloc2 a:focus {
  text-decoration: none;
  color: #FFF;
}

#accueilBloc2_01 div.icon {
  background-color: #9b9b37;
}

#accueilBloc2_02 div.icon {
  background-color: #e7ac36;
}

#accueilBloc2_03 div.icon {
  background-color: #c2131a;
}

#accueilBloc2_01 div.titre {
  color: #9b9b37;
}

#accueilBloc2_02 div.titre {
  color: #e7ac36;
}

#accueilBloc2_03 div.titre {
  color: #c2131a;
}

#accueilBloc2_01 a {
  color: #9b9b37;
  border-color: #9b9b37;
}

#accueilBloc2_01 a:hover,
#accueilBloc2_01 a:focus {
  background-color: #9b9b37;
}

#accueilBloc2_02 a {
  color: #e7ac36;
  border-color: #e7ac36;
}

#accueilBloc2_02 a:hover,
#accueilBloc2_02 a:focus {
  background-color: #e7ac36;
}

#accueilBloc2_03 a {
  color: #c2131a;
  border-color: #c2131a;
}

#accueilBloc2_03 a:hover,
#accueilBloc2_03 a:focus {
  background-color: #c2131a;
}
<!DOCTYPE html>
<html dir="ltr" lang="fr" prefix="og: http://ogp.me/ns#">

<head>
  <title>Test Flexbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="accueilBloc2">
    <div>
      <div>
        <div id="accueilBloc2_02">
          <div>
            <div class="icon"><img alt="Icône" src="accueilBloc2_02.svg" /></div>
            <div class="bloc">
              <div>
                <div class="titre">Lorem ipsum</div>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a href="#">Lorem ipsum</a>
              </div>
            </div>
          </div>
        </div>
        <div id="accueilBloc2_01">
          <div>
            <div class="icon"><img alt="Icône" src="accueilBloc2_01.svg" /></div>
            <div class="bloc">
              <div>
                <div class="titre">Duis aute irure</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <a href="#">Lorem ipsum</a>
              </div>
            </div>
          </div>
        </div>
        <div id="accueilBloc2_03">
          <div>
            <div class="icon"><img alt="Icône" src="accueilBloc2_03.svg" /></div>
            <div class="bloc">
              <div>
                <div class="titre">Excepteur sint</div>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <a href="#">Lorem ipsum</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Проблема заключается в том, что элемент <p> является самым большим, его прямой родительский элемент <div 2> не принимает высоту родительского элемента <div 3>; и только на Firefox, IE 11 и Microsoft Edge (Старый). Однако, просто открыв консоль браузера на Firefox и потянув вниз <div 1> или <div 2>, проблема исчезнет.

Что удивительно, что в предыдущих версиях Firefox я не помню столкнувшись с такой проблемой.

У вас есть идея?

Спасибо за ваше внимание!

(Извините за мой Engli sh, у вас есть право исправить мое письмо)

1 Ответ

1 голос
/ 11 апреля 2020

Я только что решил проблему, проблема в вашем blo c дисплее, вы не упомянули, как должно отображаться содержимое, просто добавьте это к #accueilBloc2>div>div>div>div>div.bloc: 

  display: flex;
  flex-direction:column;
  justify-content:space-between;
  height:100% !important;

, чтобы это будет так: enter image description here

обновленный css файл: 

#accueilBloc2 {
  background-color: #FFF;
  text-align: center;
}

#accueilBloc2>div {
  max-width: 1200px;
  width: 100%;
  display: inline-block;
  padding: 8rem 0 12rem;
}

#accueilBloc2>div>div {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#accueilBloc2>div>div>div {
  box-sizing: border-box;
  width: 33.33333333%;
  padding: 1rem;
}

#accueilBloc2>div>div>div>div {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
}

#accueilBloc2>div>div>div>div>div.icon {
  position: relative;
  z-index: 10;
  padding: 0.5rem;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-bottom: -50px;
}

#accueilBloc2>div>div>div>div>div.bloc {
  padding: 6rem 3rem 3rem;
  box-sizing: border-box;
  background-color: #F6F6F6;
  width: 100%;
  height:100% !important;
  border: 1px solid #919191;
  padding: 6rem 3rem 3rem;
  display: flex;
  flex-direction:column;
  justify-content:space-between;
    height:100% !important;
}

#accueilBloc2>div>div>div>div>div.bloc>div {
  position: relative;
  height: 100%;
}

#accueilBloc2 div.titre {
  font-family: Quicksand, sans-serif;
  font-size: 1.6rem;
  line-height: 2rem;
}

#accueilBloc2 p {
  font-family: Quicksand, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin: 2rem 0 8rem;
}

#accueilBloc2 a {
  font-size: 1.3rem;
  text-transform: uppercase;
  background-color: #FFF;
  display: block;
  border: 1px solid #111;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: Quicksand, sans-serif;
}

#accueilBloc2 a:hover,
#accueilBloc2 a:focus {
  text-decoration: none;
  color: #FFF;
}

#accueilBloc2_01 div.icon {
  background-color: #9b9b37;
}

#accueilBloc2_02 div.icon {
  background-color: #e7ac36;
}

#accueilBloc2_03 div.icon {
  background-color: #c2131a;
}

#accueilBloc2_01 div.titre {
  color: #9b9b37;
}

#accueilBloc2_02 div.titre {
  color: #e7ac36;
}

#accueilBloc2_03 div.titre {
  color: #c2131a;
}

#accueilBloc2_01 a {
  color: #9b9b37;
  border-color: #9b9b37;
}

#accueilBloc2_01 a:hover,
#accueilBloc2_01 a:focus {
  background-color: #9b9b37;
}

#accueilBloc2_02 a {
  color: #e7ac36;
  border-color: #e7ac36;
}

#accueilBloc2_02 a:hover,
#accueilBloc2_02 a:focus {
  background-color: #e7ac36;
}

#accueilBloc2_03 a {
  color: #c2131a;
  border-color: #c2131a;
}

#accueilBloc2_03 a:hover,
#accueilBloc2_03 a:focus {
  background-color: #c2131a;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...