Question

https://jsfiddle.net/lars_jensen/djaec2th/1/

我正在尝试使用百分比创建一个完全响应的网站，但我遇到了问题（请参阅jsfiddle）。

我想要的是将所有div放在网站上，但是当我改变时 #prapper-height从px到％，#wrapper加上里面的两个div消失了。

使包装器居中的解决方案是什么，仍然使用％???

HTML很简单（它只是一个例子）：

<body>
    <div id="wrapper">
        <div class="firstDiv">
            <div class="secondDiv"></div>
        </div>
    </div>
</body>

其次是CSS：

<style>
* {
margin:0;
padding:0;
}

body {
background-color:blueviolet;
display:flex;
width:100%;
height:100%;
}

#wrapper {
width:60%;
height:600px;
margin:auto;
background-color:coral;
display:flex;
}

.firstDiv {
width:50%;
height:50%;
background-color:antiquewhite;
margin:auto;
display:flex;
}

.secondDiv {
width:50%;
height:50%;
background-color:chartreuse;
margin:auto;
}
</style>

使用百分比的Flexbox

0 个答案: