Question

我试图将高度设置为相对于屏幕的大小（高度= 12％），但我不希望它超过某个像素高度（即最大高度：150px）。什么是适当的CSS。我试过了：

.titleBar {
    position: relative; 
    background-color: #5C755E; 
    padding: 1%; 
    height: 12%; 
    max-height: 100px; 
    border-bottom: .45em solid #DEB887; 
    top:0; 
    left:0; 
    width: 100%;
}

但忽略了max-height属性。在我的大型桌面屏幕上，标题栏变为200px（太大了）。

Answer 1

您需要使用min-height而不是height。除非设置为自动，否则高度会覆盖最小和最大高度。高度和最小高度的组合（除非高度：自动）忽略最小/最大高度。

这应该有用。

.titleBar {
    position: relative; 
    background-color: #5C755E; 
    padding: 1%; 
    min-height: 12%; 
    max-height: 100px; 
    border-bottom: .45em solid #DEB887; 
    top:0; 
    left:0; 
    width: 100%;
}

Answer 2

如果您有父元素，则需要为父元素添加高度。因此，如果您向父元素432px添加高度，则div现在将处于36px的高度。

另外，还有几点说明。

您应该选择使用ems或像素。不要同时使用它们。
如果将属性border-box添加到元素，则宽度将显示为页面的100％，而不是页面的100％，然后添加填充，因此结果稍微多一些。 / LI>
您可能还想添加一个最小高度。

希望这有帮助！

相对高度尺寸，最大高度

2 个答案: