Question

我有以下html页面，它在所有浏览器中显示一个空白页面。

但是，如果我给出班级的绝对高度值的 flexContainer， 然后它运作正常。

任何人都可以帮我理解为什么吗？我错过了什么？

不应该从文件正文尺寸自动计算高度吗？

<!doctype html>
<html>
 <head>

<style>
.flexContainer{
 display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-between;
box-shadow: 3px 1px 4px 0px black;
height:50%;
width:90%;
}

.flexElmContainer
{
width:50%;
display:flex;
}

.flexElmContainer:nth-of-type(1n)  > .flexElm{
background-color: #3498DB;
transform:rotate(30deg);
width:50%;
height:50%;
margin:auto;
}

.flexElmContainer:nth-of-type(2n) > .flexElm{
 background-color: #E74C3C;
transform:rotate(30deg);
 width:50%;
height:50%;
margin:auto;
}
</style>
</head>
 <body>
<div id='cont' class='flexContainer'>
<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>          
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>
</div>
 </body>
</html>

Answer 1

尝试使用此代码并检查指向height: 100% not working

的链接

  .flexContainer{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content: space-between;
            box-shadow: 3px 1px 4px 0px black;
            height:50vh;
            width:90%;
        }

        .flexElmContainer
        {
            width:50%;
            display:flex;
        }

        .flexElmContainer:nth-of-type(1n)  > .flexElm{
            background-color: #3498DB;
            transform:rotate(30deg);
            width:50%;
            height:50%;
            margin:auto;
        }

        .flexElmContainer:nth-of-type(2n) > .flexElm{
            background-color: #E74C3C;
            transform:rotate(30deg);
            width:50%;
            height:50%;
            margin:auto;
        }

<div id='cont' class='flexContainer'>
    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>
</div>

Answer 2

请添加以下CSS

body {
    height: 100vh;
}

Demo

CSS flexbox高度不显示

2 个答案: