0

So I've seen this post: Can I scale a div's height proportionally to its width using CSS? and it sort of answers my Question. I can get divs to sclae porpotionally as I need. However, what I also need is to set a minimum height for those divs.

In this fiddle http://jsfiddle.net/FBZuB/1/ I have set up what I am trying to accomplish. The BLUE div is a general wrapper that then defines the height of the RED div based on the width of the BLUE div. However when I try to change the min-height on the RED div, the divs that I want to scale AND have a min-height, unexpected results occur.

I would think once I scale DOWN to the min-height point, the div would stop scaling and only change in width. However, it seems like setting the min-height just sets some sort of base point for the whole calculation and everything scales continually. I hope this makes sense.

The RED divs should scale up and down, but at a certain point, when the RED div hits its minimum height, it should stop scaling in height and only in width. I have accomplished this before with pure javascript, but since I read the post above, I am trying to get a CSS only solution.

Here is the code. You can ignore the content for now... I am focuses mainly on the red blocks. Proportionally scale width/height, until it hits the min-height and then it should stop scaling the height and only the width.

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%;
}
Community
  • 1
  • 1
Leeish
  • 5,203
  • 2
  • 17
  • 45

1 Answers1

-1

Unfortunately plain CSS is unable to calculate any expressions in all browsers except IE, and as such you will have to use at least some JavaScript to dynamically calculate the width.
I would probably do something like this in your html file.
Since you didn't specify how you are resizing your div, I'll assume that it's just when the window resizes.

<body onresize="
    var left = document.getElementById('left');
    if (left.clientHeight < left.style.min-height) {
        left.style.cheight = left.style.min-height;
    }
">
</body>
Community
  • 1
  • 1
chossenger
  • 613
  • 6
  • 15