最小高度最小宽度不适用于科尔多瓦答案

【问题标题】：min height min width not working on cordova最小高度最小宽度不适用于科尔多瓦
【发布时间】：2015-10-01 16:08:58
【问题描述】：

我正在尝试使用 cordova，但我忘记了我过去对 html 和 css 的大部分知识……但我想在容器内创建一个简单的 3 div 布局，每个 33% 的高度和 100% 的宽度。这是我的html：

 <body>
        <div class="container">
              <div class="ctn1">
              <h2>ddd</h2>
              </div>
              <div class="ctn2">
              </div>    
              <div class="ctn3">
              </div>    
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>

还有我的 CSS：

body{
    height: 100%;
    min-height: 100%;

}

.container{

    height:100%;
    width:100%;

}
.ctn1{
    min-height: 33%;
    min-width: 100%;
    background-color: red;
}
.ctn2{
    min-height: 33%;
    min-width: 100%;
    background-color: yellow;
}
.ctn3{
    min-height: 33%;
    min-width: 100%;
    background-color: blue;
}

背景只显示里面的文字...谢谢

【问题讨论】：

因为 min-height 不能以百分比计算。用像素或 em 试试。

标签： html css cordova

【解决方案1】：

在 CSS 中继承高度总是有点棘手。

您需要为 html 和 body 提供 100% 的高度并删除它们的默认边距。此外，请确保默认的h2 边距保留在其容器内，从而使您的容器成为overflow: hidden。

Here's your updated JSFiddle

【讨论】：

【解决方案2】：

如果你想将这些 div 的 33% 宽度和一些高度比使用这个 CSS：

body{
    height: 100%;
    min-height: 100%;

}

.container{

    height:100%;
    width:100%;
    clear: both;
    overflow: hidden;

}
.ctn1{
    min-height: 200px;
    width: 33%;
    float:left;
    background-color: red;
}
.ctn2{
    min-height: 200px;
    width: 33%;
    float:left;
    background-color: yellow;
}
.ctn3{
    min-height: 200px;
    width: 33%;
    float:left;
    background-color: blue;
}

【讨论】：

% 不起作用，我不想设置 px，因为我正在使用 cordova 和许多设备尺寸...

【解决方案3】：

如果没有任何内容，其他 2 个 div 将不会显示。如果您需要它们为空，请尝试添加一个不间断的空格（找到答案 here）

所以你的 html 应该是这样的

 <body>
    <div class="container">
          <div class="ctn1">
          <h2>ddd</h2>
          </div>
          <div class="ctn2">
          <h2>&nbsp;</h2>
          </div>    
          <div class="ctn3">
          <h2>&nbsp;</h2>
          </div>    
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

【讨论】：

这是一个 hack，并不能解决高度问题。此外，div 不需要内容可见，使用 CSS 有更好的方法。