添加<！DOCTYPE html>废墟对齐

我忘了将<!DOCTYPE html>添加到一些项目，所以我回去添加它。这破坏了几个元素的对齐/高度，但是我可以通过在px或%中添加缺失来修复它。添加<！DOCTYPE html>废墟对齐

但是，在我的一个项目中，这并没有解决问题。这是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; 
}

来源

2016-10-03 l-emi

不要使用ID喜欢类，ID必须对于整个文档是唯一的 – Sojtin

这可能也有帮助：http://stackoverflow.com/a/31728799/3597276 –

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

来源

2016-10-03 11:18:56 Sojtin

这工作，谢谢！唯一的问题是它使计算器太长，所以不是'height：calc（400px/5）;'我使用'height：calc（400px/6.5）;'。 –

我使用'calc（）'只是为了可读性的原因，因为有5行按钮，你可以使用像素/ em/rem等常规值 – Sojtin

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

见下面的CSS -

#buttons { 
    height: 75%; 
} 

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

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

来源

2016-10-03 11:18:48

小提琴：

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

的问题是不是与DOCTYPE声明。你没有正确设置div的高度。

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

但是，下一个ID为buttons的子div未采用calcbox的全高。所以，我给它分配了100％的高度。

然后我分配了20％的高度到#buttonrow，这样5行占总高度的20％。

然后我给按钮加了100％的高度。

（你的错误：将15％的高度，以按钮将不会采取的400像素的15％，但将15％的它的父即buttonrow）

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

来源