Question

我忘记将<!DOCTYPE html>添加到某些项目中，所以我回去添加它。这破坏了一些元素的对齐/高度，但我能够通过添加px或%来修复它。

然而，在我的一个项目中，这并没有解决问题。这是fiddle。这是应该填满整个容器的按钮高度。没有<!DOCTYPE html>它很有用。我已经查看了其他类似的问题，但给出的建议（添加了缺失的px或%）没有奏效。

这是按钮的CSS：

button {
    padding: 0px !important;
    margin: 0px !important;
    height: 15% !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
}

Answer 1

百分比是根据父容器的高度工作的，所以你应该提到#buttons（按钮容器div）的高度。

见下文css -

#buttons {
    height: 75%;
}

#buttonrow {
    height: 20%; /* you have 5 rows, so it will be 20% */
}

#buttons button {
    height: 100% !important;
}

Answer 2

https://jsfiddle.net/tn3z9e6k/4/

.buttonrow { // created from #buttonrow
    width: 100%;
    padding: 0px;
    margin: 0px;
    height:calc(400px / 5); // total height / rows
}


button {
    padding: 0px !important;
    margin: 0px !important;
    height: 100% !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
}

Answer 3

<强>小提琴：

https://jsfiddle.net/KiranKumarDash/w3xshybk/3/

问题不在于DOCTYPE声明。您没有正确设置div的高度。

您已将ID为calcbox的div的高度设置为400px。

但是，身份buttons的下一个子div未达到calcbox的全高。所以，我给它分配了100％的高度。

然后我为#buttonrow分配了20％的高度，以便5行占总高度的20％。

然后我在按钮上添加了100％的高度。

（你的错误：为按钮增加15％的高度不会占用400px的15％，但会占用它的父母的15％，即按钮。）

https://jsfiddle.net/KiranKumarDash/w3xshybk/3/

添加废墟对齐

3 个答案: