Question

我正在尝试使用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;
}

背景只显示内部文字...谢谢

Answer 1

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

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

Here's your updated JSFiddle

Answer 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;
}

Answer 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>

最小高度最小宽度不在cordova上工作

3 个答案: