2

我正在尝试将高度设置为相对于屏幕尺寸（高度 = 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 像素（太大了）。

4

2 回答 2

3

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

这应该有效。

.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%;
}
于 2012-12-29T09:28:24.337 回答
1

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

另外，一些注意事项。

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

希望这可以帮助！

于 2012-12-29T07:10:44.240 回答