具有最大高度的相对高度大小答案

【问题标题】：Relative Height size with a max-height具有最大高度的相对高度大小
【发布时间】：2012-12-14 07:16:54
【问题描述】：

我正在尝试将高度设置为相对于屏幕大小（高度 = 12%），但我不希望它超过某个像素高度（即最大高度：150 像素）。什么是合适的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 属性。在我的大桌面屏幕上，标题栏变成 200 像素（太大了）。

【问题讨论】：

又一个路过的投票，没有解释。我希望堆栈溢出能够在不解释原因的情况下解决这个投票不足的问题。

标签： height fluid-layout css

【解决方案1】：

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

这应该可行。

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

【讨论】：

【解决方案2】：

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

还有一些注意事项。

您应该选择使用 em 或像素。不要同时使用。
如果给元素添加属性border-box，宽度会显示为页面的100%，而不是页面的100%，然后加上padding，结果会稍微多一点。
您可能还想添加一个最小高度。

希望这会有所帮助！

【讨论】：

谢谢 Cody，但是，我希望设计流畅（使用 ems 等相对测量值），但我不希望标题栏大于 125 像素（徽标的全尺寸）图像为 100 像素，因此无法很好地缩放）。现在网站上没有使用像素的地方，我只想限制一个高度属性，所以在大屏幕上，它不会比图像徽标大。
我希望这会有所帮助。我认为这是您想要的。
感谢您的帮助，我会给您加 1，但这并不能解决我的问题。我需要能够设置一个相对高度（12%），一个在父元素内设置为相对高度（33%）的具体最大高度（125px）。不过感谢您的帮助。