【问题标题】:Flexbox is not taking full height in IE [duplicate]Flexbox 在 IE 中没有占据全部高度 [重复]
【发布时间】:2018-01-12 11:39:57
【问题描述】:

child div 仅在 IE11 中不会占用100% 的高度 flex-wrap div。

html,
body {
  margin: 0;
  padding: 0;
}

.flex-wrap {
  display: flex;
  display: -ms-flex;
  min-height: 100vh;
  background: #ddd;
}

.child {
  border: 1px solid;
  flex: 1 1;
}
<div>
  <div class="flex-wrap">
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
    </div>
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
  </div>
</div>

【问题讨论】:

    标签: html css internet-explorer flexbox


    【解决方案1】:

    这是 flexbox 的一个已知问题,但是解决方案之一是使用 jquery 修复它。类似的东西应该可以工作。

    $(document).ready(function(){
    	var heightBox =  0;
    	$('.child').each(function(){
    	if($(this).height()>heightBox){
    		heightBox=$(this).height();
    		}
    	});
    	$('.child').height(heightBox);
    });
    html,
    body {
      margin: 0;
      padding: 0;
    }
    
    .flex-wrap {
      display: flex;
      display: -ms-flex;
      min-height: 100vh;
      background: #ddd;
    }
    
    .child {
      border: 1px solid;
      flex: 1 1;
    }
    <div>
      <div class="flex-wrap">
        <div class="child">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
        </div>
        <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
      </div>
    </div>

    【讨论】:

      【解决方案2】:

      min-height: 100vh 添加到您的弹性项目中。

      * {
        box-sizing: border-box;
      }
      
      body {
        margin: 0;
        padding: 0;
      }
      
      .flex-wrap {
        display: flex;
        display: -ms-flex;
        background: #ddd;
      }
      
      .child {
        border: 1px solid;
        flex: 1 1;
        min-height: 100vh;
      }
      <div>
        <div class="flex-wrap">
          <div class="child">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
          </div>
          <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
        </div>
      </div>

      box-sizing: border-box; 添加到被视为height 一部分的边框。

      【讨论】:

      • 如果没有合适的解决方案,我考虑将min-heightchild div 作为最后的选择。
      • @TalentRunners jQuery 解决方案不是最后的选择吗?:)
      • 在收到重复的 JQuery 答案后,您的答案似乎排在倒数第二位:D
      • 我认为会有任何合适的解决方案,但我绝对想不到,但没想到 jquery 会得到答案。
      • @TalentRunners 好的,感谢您的反馈,从我的回答中删除了第二个选项。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-01-25
      • 1970-01-01
      • 2018-01-19
      • 2022-01-10
      • 2018-04-21
      • 2018-03-27
      • 1970-01-01
      相关资源
      最近更新 更多