html – Chrome中溢出100%高度的Div

前端之家收集整理的这篇文章主要介绍了html – Chrome中溢出100%高度的Div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试按照 herehere所述制作100%高度flex的孩子.在firefox和IE中,它显示为预期,但在Chrome中它已经搞砸了. div正在走出身体.是不是铬的另一个副作用遵循规格发球或仍然是一个错误

代码

<!DOCTYPE html>
<html>
<head>
<style>
    html,body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    div {
        border: 1px solid black;
        Box-sizing: border-Box;
        margin: 0;
        padding: 0;
    }

    .red-border {
        border: 2px solid red;
    }

    .blue-border {
        border: 2px solid blue;
    }

    .green-border {
        border: 2px solid green;
    }
</style>
</head>
<body class="red-border" >
<div clsas="blue-border" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
    <div  style="flex: 0 1 auto; ">top</content></div>

    <div class="green-border"  style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >
        <div style="flex: 0 1 auto; ">left</div>
        <div style="flex: 1 1 auto; width: 100%; height: 100%;">
            <div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>
        </div>
        <div style="flex: 0 1 auto; ">right</div>
    </div>

    <div style="flex: 0 1 auto; ">bottom</content></div>
</div>
</body>
</html>

plnkr:http://run.plnkr.co/plunks/wi5MQYK5yEdzdgQBaUWh/

这就是它在ff中的表现,即(11):

这就是它在chome中的样子:

更新:’center’div应该是一个非flex的div,仍然必须有100%的高度.原因是非flex的div是我真正的网站结构非常复杂 – 它使用了很多web组件,其中一些只是不能使用flex.所以在某些时候我不得不停止使用flex并使用’normal’div来获得100%的高度.

解决方法

这个问题似乎源于你在同一个声明块中组合了height和flex-basis属性这一事实.它似乎造成了冲突.我在下面的回答中删除了高度并使用了flex-basis.您还会注意到其他一些调整.

更改:

(1)

< div class =“green-border”
style =“flex:1 1 auto; display:flex; flex-direction:row; width:100%; height:100%;” >

< div class =“green-border”
style =“flex:1 1 100%; display:flex; flex-direction:row; width:100%;” >

备注:删除高度;使用flex-basis代替;

(2)

< div style =“flex:1 1 auto; width:100%; height:100%;”>

< div style =“flex:1 1 100%;宽度:100%;显示:flex;”>

备注:删除高度;使用flex-basis代替;建立嵌套的flex容器;

(3)

< div style =“background-color:#ff6500; width:100%; height:100%;”> center< / div>

< div style =“background-color:#ff6500; width:100%; flex:1 1 100%;”> center< / div>

备注:删除高度;使用flex-basis代替;增加了flex属性;

最后,由于拼写错误,蓝色边框没有显示出来.

(4)

clsas =“蓝色边框”

类=“蓝色边框”

通过上面的调整,Chrome中的布局呈现如下:

所有盒子都放在容器内.

DEMO

将100%高度应用于嵌套的非柔性元素

在大多数情况下,在子元素上使用百分比高度时,还必须为父元素和所有祖先元素指定百分比高度,直到并包括根元素.

html,body { height: 100%; }

我在这里解释了这个原因:

> Working with the CSS height property and percentage values

但仔细观察spec会发现一个例外:

The percentage is calculated with respect to the height of the
generated Box’s containing block. If the height of the containing
block is not specified explicitly (i.e.,it depends on content
height),and this element is not absolutely positioned,the value
computes to ‘auto’.

注意部分:…并且元素没有绝对定位.

因此,请在“中心”框中尝试:

更改:

(5)

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%; position: relative;">
    <div style="border: 5px solid yellow; position: absolute; height: 100%; width: 100%;">
       center</div>
</div>

笔记:

>添加位置:相对于建立最近定位的祖先进行绝对定位
>创建了新的嵌套的非flex div容器
>将绝对定位应用于高度为100%的新div.

使用绝对定位,您无需将百分比高度应用于父容器.

DEMO

猜你在找的HTML相关文章