Empty div被隐藏，没有任何内容，如何显示但保持空白？

Question

因此，我了解当您设置像素的宽度和高度时，可以解决隐藏空div的问题，但是当使用宽度和高度作为百分比时呢？

这是我的代码，看看是否可以弄清楚如何使该div显示背景颜色，但将其保持空白...谢谢！

HTML：

<div id="container"></div>

CSS：

#container{
    position: relative;
    width: 80%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    margin-bottom: 10%;
    background-color: #E9E9E9;
    opacity:0.6; filter:alpha(opacity=60);
}

Answer 1

#container:before {
    content:"\00a0\00a0"; 
}

Demo

Answer 2

我看到两个选项：

• 在div内插入 ：<div id="container">&nbsp;</div>
• 在CSS中插入min-width:1px;

如果不指定高度数字（如果DIV ID为空，则无法将高度增大）。如果父级已定义身高，则只能使用身高百分比（%）。

Answer 3

div中的提及类属性以引用容器样式类

<div id="container"></div>

<style>
    <!--
    #container{
        position: relative;
        width: 80px;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;
        margin-bottom: 10%;
        background-color: #E9E9E9;
        opacity:0.6; filter:alpha(opacity=60);
    }
    -->
    </style>

在此处检查演示文件：jsfiddle