最小高度不能正常工作？ [英] Min height not working properly?
本文介绍了最小高度不能正常工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个最小高度为100％的DIV，它不适用于FireFox / IE。它只适用于使用高度属性。
Chrome的行为是正确的。
<风格>
.page {
min-height：100％;
border：1px纯黑色;
}
< / style>
< html>
< div class =page>
使用firefox / IE，这个div不会占用整个页面高度的100％。
< / div>
< / html>
更新：
我知道我需要定义body / html的高度。这就说得通了。但即使有这个解决方案，我仍然不能使用min-height作为子div。看下面的例子。小孩div没有拿到家长div的33％。 （在FIREFOX和IE中）
< style>
.page {
min-height：100％;
border：1px纯黑色;
}
html，
body {
height：100％;
}
.child {
min-height：33％;
border：1px纯黑色;
display：flex;
}
< / style>
< html>
< div class =page>
父母div
< div class =child>
使用firefox / IE，这个CHILD div不会占用33％的容器。
< / div>
< / div>
< / html>
解决方案
您还需要给 html 和 body a height
html，body {
height：100％;
更新1后，问题编辑
有了这个新的标记， .page 需要 height：100％
< div class =page > < div class =child>用firefox / IE，这个CHILD div并没有拉伸到100％的容器。 < / div>< / div>
$ b $ hr b
更新2，基于评论
改用Flexbox和视口单元 vh ，它会工作得更好
body {display：flex; / * IE需要这个最小高度错误* /}。边框：1px纯黑色;显示：flex; flex-direction：column;}。child {flex-grow：1; border：1px solid red;}
< div class = 页 > < div class =child>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br> < / div>< / div>
$ b
使用 min-height：33％
body {display：flex; / * IE需要这个最小高度错误* /}。边框：1px纯黑色;显示：flex; flex-direction：column;}。child {min-height：33％; border：1px solid red;}
< div class = 页 > < div class =child>有了firefox / IE，这个CHILD div并不是伸手拿100％的容器。< br> < / div>< / div>
I am trying to create a DIV that will have a minimum height of 100%, which is not working in FireFox / IE. It works only if use the "height" property.
Chrome is behaving correctly.
<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>
Update:
I understand that I need to define the height of the body/html. That makes sense. But even with this solution, I still cannot use min-height for a child div. See the below example. The child div is not taking 33% of the parent div. (In FIREFOX and 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>
解决方案 You also need to give the html and body a height
html, body {
height: 100%;
}
Update 1, after a question edit
With that new markup, also .page need 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>
Update 2, based on a comment
Use Flexbox and viewport units vh instead, it will work much better
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>
Which also will work with the 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>
这篇关于最小高度不能正常工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
