相對高度尺寸與最大高度

我想設置一個高度是相對於屏幕的大小（高度= 12％），但我不希望它超過某個像素高度（即最大-height：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%; 
}

但這會忽略最大高度屬性。在我的大型桌面屏幕上，標題欄變爲200像素（太大）。

來源

2012-12-29 Mike

另一個驅動器downvote，沒有解釋。我希望堆棧溢出將解決這個downvoting的問題，而沒有任何解釋爲什麼。 – Mike

您需要使用最小高度而不是高度。高度覆蓋最小和最大高度，除非設置爲自動。高度和最小高度的組合（除非高度：自動）忽略最小/最大高度。

這應該工作。

.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-29 09:28:24 user1721135

您需要爲父元素添加一個高度（如果有的話）。因此，如果您將高度添加到432px的父元素，則div現在將處於36px的高度。

另外，一些筆記。

您應該選擇使用ems或像素。不要同時使用兩者。
如果將屬性邊框添加到元素中，寬度將顯示爲100％的頁面，而不是100％的頁面，然後添加填充，所以結果會稍微多一點。
您可能還想要添加最小高度。

希望這有助於！

來源

2012-12-29 07:10:44

這是一個小提琴去與該http://jsfiddle.net/burn123/sx7hH/ –

謝謝科迪，但是，我希望設計是流體（使用相對測量像ems），但我不希望標題酒吧是任何大於125px（標誌圖像的全尺寸是100px，因此它不能很好地擴展）。目前網站上沒有使用像素的地方，我只想限制一個高度屬性，所以在大屏幕上，它不會比圖片標誌大。 – Mike

嗯，我希望這有助於。我想它是你想要的。 –

相對高度尺寸與最大高度

回答

相關問題