Safari / Chrome flex-parent 100％身高+填充和100％身高的孩子

Question

Safari使child塊的高度大於Chrome。

我需要在Chrome和Safari中實現相同的阻止行為。

Chrome中的填充會影響child's height 。 Safari中的填充與height相加。

.body {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
}

.header {
  height: 60px;
  width: 100%;
}

.ctn {
  height: 100%;
  width: 100%;
  padding-bottom: 80px;
}

.ctn__child {
  min-width: 100%;
  height: 100%;
}

https://jsfiddle.net/zqjpzLLb/

Answer 1

使用JSFiddle時，您的iframe客戶端高度是否相同？ 因為這些也會影響身高。

我已經設法使用以下代碼獲得相同高度的跨瀏覽器：

 * {box-sizing: border-box;} body, html { height: 100%; } .body { display: flex; justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; height: 100%; background-color: #4f4; } .header { height: 60px; width: 100%; background-color: #4a4; } .ctn { display: inherit; /* Inherit display flex for __child grow inside */ flex-grow: 1; /* Make sure it fills up the remaining parent space */ width: 100%; padding-bottom: 80px; background-color: blue; } .ctn__child { flex-grow: 1; /* Let the child fill all the remaining space inside the .ctn class */ min-width: 100%; background-color: rgba(255, 100, 100, .8); } 

 <div class="body"> <div class="header">Header</div> <div class="ctn"> <div class="ctn__child"> child </div> </div> </div> 

https://jsfiddle.net/zqjpzLLb/17/