所以我看了这篇文章:Can I scale a div's height proportionally to its width using CSS?,它回答了我的问题。我可以根据需要让divs进行补全。但是,我还需要为这些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%;
}
最佳答案
不幸的是,普通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>
关于html - 将SAME ROW的div比例缩放到相同的高度并具有Min Height高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15262554/