最小高度无法正常工作？

Question

最小高度无法正常工作？

Dav*_*ekh 3 css firefox internet-explorer flexbox

我正在尝试创建一个最小高度为 100% 的 DIV，这在 FireFox / IE 中不起作用。仅当使用“高度”属性时它才有效。

Chrome 运行正常。

<style>
    .page{
        min-height:100%;
        border:1px solid black;
    }
</style>
<html>
    <div class="page">
        With firefox / IE, this div is not stretching to take 100% of the total page height.
    </div>
</html>

Run Code Online (Sandbox Code Playgroud)

更新：

我知道我需要定义 body/html 的高度。这就说得通了。但即使使用这个解决方案，我仍然无法对子 div 使用 min-height 。请参阅下面的示例。子 div 没有占用父 div 的 33%。（在 Firefox 和 IE 中）

<style>
    .page{
        min-height:100%;
        border:1px solid black;
    }

    html,
    body {
        height: 100%;
    }

    .child{
        min-height:33%;
        border:1px solid black;
        display:flex;
    }

</style>
<html>
    <div class="page">
        Parent div
    <div class="child">
        With firefox / IE, this CHILD div is not stretching to take 33% of the container.
    </div>
</div>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

LGS*_*Son 5

您还需要给出html和的body高度

html, body {
  height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

问题编辑后更新1

有了新的标记，还.page需要height: 100%

html, body {
  height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

html,
body {
  height: 100%;
}

.page {
  height: 100%;
  border: 1px solid black;
}

.child {
  min-height: 100%;
  border: 1px solid red;
  display: flex;
}

Run Code Online (Sandbox Code Playgroud)

更新2，基于评论

使用 Flexbox 和视口单元vh代替，效果会更好

<div class="page">
  <div class="child">
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

body {
  display: flex;                 /*  IE need this for its 'min-height' bug  */
}

.page {
  min-height: 100vh;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
  border: 1px solid red;
}

Run Code Online (Sandbox Code Playgroud)

这也将与min-height: 33%

<div class="page">
  <div class="child">
  
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
    With firefox / IE, this CHILD div is not stretching to take 100% of the container.<br>
    
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

body {
  display: flex;                 /*  IE need this for its 'min-height' bug  */
}

.page {
  min-height: 100vh;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.child {
  min-height: 33%;
  border: 1px solid red;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	10763 次
最近记录：	2 年，8 月前