Question

好的。首先，我是CSS和HTML的新手。我一直致力于这个项目，并在我学习的同时学习。话虽这么说，如果你能解释一下你的答案，那将会对我有所帮助！

反正。简而言之，我正在创建一个表单，并尝试将div显示为表格（我知道如何使用HTML表格，我选择使用div，因此我可以使用CSS更好地设计它）。

基本上，我有一个显示为表格的主要div，其高度设置为100％。然后我有嵌套的div显示为表行（总共5行），以及显示为表格单元格的其他嵌套div。

我遇到的问题是，当我设置行或单元格的高度时，它们不会改变......全部！请记住，我使用的是百分比而非px或em。

我试图将第1行和第5行放在主要div的100％的5％，而将2 - 4放在主要div的100％中的30％。我假设这将等于100％并导致行匹配主div的100％高度。它显然不起作用所以我认为我的逻辑是完全错误的。

我已经找到了一个解决方案而没找到一个，这就是我在这里的原因。

这是我正在做的事情的想法：

#MainDivTable
{
    display: table;
    height: 100%
    width: 100%;
}

#DivCol1Row2
{
    height: 30%;
}

#DivCol1Row3
{
    height: 30%;
}

#DivCol1Row4
{
    height: 30%;
}

#DivCol1Row5
{
    height: 5%;
}

Answer 1

您需要了解百分比高度始终是某事的百分比即当你将mainTable高度指定为100％时，它必须是100％的东西，通常是父亲的身高。

首先，您需要将父级的高度设置为固定值，否则您可以向上传播布局的百分比高度，直到到达根元素。

在你的情况下，我想，

    html, body { height:100%;}

应该这样做。

嵌套的Div高度不会改变

1 个答案: