这里是小提琴：http://jsfiddle.net/w4yXb/4/
在HTML中，我有一个标题，标题上有一个按钮。我希望它们都具有相同的高度，以便它们正确对齐。
我在css中使用标题div上的height属性，我使用百分比，因此它根据屏幕大小进行响应。
在小提琴中，您可以看到.header-button与.header的高度不同，即使它与height具有相同的.header属性。
如何让这些元素对齐？
答案 0 :(得分：1)
如果以百分比形式给出高度，则高度始终取决于父元素。因此，如果父元素高50％且子元素也高50％，则它将是父元素高度的50％。因此，如果父母是50px高，孩子将是25px高。这是它不起作用的一个原因。然后填充和边框之类的东西添加到高度，所以在我的例子中，具有5px填充和2px边框的25px高子元素将最终为39px高。
要弥补子元素（.header菜单）的附加高度，请为父元素（.header）指定相同的附加填充和边框，并将子元素的高度更改回100％：< / p>
.header {
padding-bottom: 31px;
border-bottom: 6px #808080 solid;
}
.header-menu {
height: 100%;
}