Question

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

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>

更新

我知道我需要定义body / html的高度。那讲得通。但即使有了这个解决方案，我仍然无法使用min-height作为儿童div。请参阅以下示例。儿童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>

Answer 1

您还需要为html和body提供一个高度

html, body {
  height: 100%;
}

在编辑问题后更新1

使用新标记时，.page也需要height: 100%

html,
body {
  height: 100%;
}

.page {
  height: 100%;
  border: 1px solid black;
}

.child {
  min-height: 100%;
  border: 1px solid red;
  display: flex;
}

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

根据评论更新2

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

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;
}

<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>

这也适用于min-height: 33%

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;
}

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

Answer 2

如果元素的直接父级没有使用CSS应用显式min-height，则height属性不起作用。

来自MDN

百分比是根据高度来计算的生成的包含块的块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的百分比值被视为0。

唯一的方法是在父div内添加另一个div，并将其高度显式设置为100％，然后将子div插入其中{{1}将会工作

min-height

Answer 3

说实话，我不确定为什么它甚至适用于height属性。当您在CSS中使用百分比高度时，根元素（html，body）需要具有已定义的高度。

这是因为百分比是父母的百分比。如果根元素没有定义的高度，则不能从中计算高度。

因此，为了给根元素一个高度，你将它设置为100％，如下所示：

＆＃13;

html, body {
  height: 100%;
}
.page{
  min-height:100%;
  border:1px solid black;
}

＆＃13;

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

＆＃13;

Answer 4

在我的情况下，解决方案是使用min-height: 100vh

Answer 5

尝试添加您的CSS代码：

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

有时浏览器不会以相同的方式运行，您需要添加一些东西。 Moz for mozilla firefox。 -webkit-styleGoesHere适用于Chrome。我希望这会有所帮助。

最小高度不能正常工作？

5 个答案: