css 最小高度是否正常工作？

3lxsmp7m 于 2023-06-25 发布在其他

关注(0)|答案(6)|浏览(105)

我正在尝试创建一个最小高度为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的高度。有道理但是即使使用了这个解决方案，我仍然不能对一个子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>

css

来源：https://stackoverflow.com/questions/46023951/min-height-not-working-properly

6条答案

按热度按时间

svmlkihl1#

您还需要给予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和viewport单位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>

赞(0）回复(0）举报 2023-06-25

dddzy1tm2#

如果元素的直接父级没有使用CSS应用显式的height，则min-height和height属性的百分比值不起作用。
从MDN
百分比是相对于生成的框的包含块的高度计算的。如果没有明确指定包含块的高度（即，它取决于内容高度），并且此元素不是绝对定位的，则百分比值被视为0。
唯一的方法是在父div中添加另一个div，并显式地将其高度设置为100%，然后将子div插入其中，然后min-height就可以工作了

<html>
  <body>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
    .page{
        min-height:100%;
        border:1px solid black;
    }
    .wrapper {
      height: 100%;
    }
    .child {
      min-height: 33%;
      background: yellow;
    }
  </style>
    <div class="page">
        <div class="wrapper">
          <div class="child"></div>
        </div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-06-25

qyyhg6bp3#

老实说，我不知道为什么它甚至与高度属性。当你在CSS中使用百分比高度时，根元素（html，body）需要有一个定义好的高度。
这是因为百分比是父项的百分比。如果根元素没有定义的高度，则不能从它计算高度。
因此，要给予根元素一个高度，你可以将它设置为100%，如下所示：

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

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

赞(0）回复(0）举报 2023-06-25

kq0g1dla4#

在我的例子中，解决方案是使用min-height: 100vh

赞(0）回复(0）举报 2023-06-25

pvabu6sv5#

在表**<th> \ <tr>**的情况下，min-height不工作，但您可以使用heigh，在这种情况下将表现为min-height。

赞(0）回复(0）举报 2023-06-25

kninwzqo6#

尝试在CSS代码中添加以下内容：

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

有时浏览器的行为不一样，你需要添加一些东西。Mozilla Firefox的Moz。-webkit-styleGoesHere用于Chrome。希望这能帮上忙。

赞(0）回复(0）举报 2023-06-25

我来回答

css 最小高度是否正常工作？

6条答案

相关问题

热门标签

最新问答