添加<！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/

來源