按比例縮放相同高度的div，並有最小高度

所以我看過這篇文章：Can I scale a div's height proportionally to its width using CSS?，它回答了我的問題。我可以根據自己的需要將div分配給sclae。但是，我還需要爲這些div設置最小高度。按比例縮放相同高度的div，並有最小高度

在這個小提琴http://jsfiddle.net/FBZuB/1/我已經設置了我想要完成的。 BLUE div是一個通用包裝，然後根據BLUE div的寬度定義RED div的高度。但是，當我嘗試更改RED div上的最小高度時，我想縮放的div的高度最小，出現意外的結果。

我會想，一旦我縮小到最低高度點，div將停止縮放，只改變寬度。但是，似乎設置最小高度只是爲整個計算設置了某種基點，並且所有事物都不斷縮放。我希望這是有道理的。

RED div應該向上和向下縮放，但是在某個點上，當RED div達到其最小高度時，它應該停止縮放高度和寬度。我已經完成了這與純JavaScript，但因爲我讀了上面的帖子，我想獲得一個CSS唯一的解決方案。

這是代碼。您現在可以忽略內容...我主要關注紅色塊。按比例縮放寬度/高度，直到遇到最小高度，然後停止縮放高度並僅縮放寬度。

HTML

<div style="background: blue; width: 70%;"> 
<div id="left"> 
    <div class="content"></div> 
</div> 
<div id="right"> 
</div> 
</div>

CSS

div { 
    margin: 5%; 
    float: left; 
    background: red; 
    position: relative; 
} 
#left { 
    width: 50%; 
    padding-bottom: 60%; 
    min-height: 100px; 
} 
#right { 
    width: 30%; 
    padding-bottom: 60%; 
    min-height: 100px; 
} 
.content { 
    position: absolute; 
    width: 90%; 
    margin: 5%; 
    background: green; 
    top: 0; 
    left: 0; 
    height: 90%; 
}

來源

2013-03-07 Leeish

-1

不幸的是純CSS是無法計算的所有瀏覽器except IE任何表情，這樣你將有至少使用JavaScript來動態計算寬度。
我可能會在你的html文件中做這樣的事情。
既然你沒有指定如何你正在調整你的div，我會假設它只是當窗口調整大小。

<body onresize=" 
    var left = document.getElementById('left'); 
    if (left.clientHeight < left.style.min-height) { 
     left.style.cheight = left.style.min-height; 
    } 
"> 
</body>

來源

2013-03-07 23:21:49 chossenger

假設藍色div是基於屏幕寬度或其他已知因素的最大寬度。 – Leeish 2013-03-08 01:01:29

按比例縮放相同高度的div，並有最小高度

回答

相關問題