高度自适应容器

格雷沃克斯

我查看了我的案例(float / clearfix,相对父/绝对子),但未发现以下问题的任何反映:

<div 2>在灵活的环境中,有三个具有相同的高度(这要归功于flex),每个元素都包含三个元素(<div 3>+ <p>+ <a>),<p>上方和下方都有一个边距,而后者较大,以便能够离开空间用于<a>其在附接至底部绝对位置<div 2>的父。

这是示例(On 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的早期版本中,我不记得遇到过此类问题。

你有好主意吗 ?

感谢您的关注!

(对不起,我的英语,您有权更正我的写作)

Aymen TAGHLISSIA

我只是解决了问题,问题出在您的整体显示中,您没有提及内容的显示方式,只需将其添加到#accueilBloc2>div>div>div>div>div.bloc

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

因此它将是这样的: 在此处输入图片说明

更新的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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章