根据宽度设置div高度

Question

是否可以动态设置div宽度，然后将其高度设置为该宽度的某个百分比。这样的事情：

#myDiv{ 
    width:%100; 
    height: {35% of width}; 
} 

我想保留一个div的宽度与高度的比率，无论宽度可能是什么。

Answer 1

HTML：

<div class='box'> 
    <div class='content'>All your content are belong to us</div> 
</div> 

我们用两个块元素，以达到所期望的行为，宽度框，高度内容框。

CSS：

.box{ 
    position: relative; 
    width: 50%;  /* desired width */ 
} 
.box:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /*What you want the height to be in relation to the width*/ 
} 

内容：
然后将内容设置为覆盖整个盒子绝对所以无论大小，它适合！

.content{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

田田你做......

来源：Pure CSS

Answer 2

尝试一个简单的JavaScript：

document.getElementById("elemID").style.height = 
Math.round((document.getElementById("elemID").style.width * 100)/35) + "px"; 

这将得到的用百分比（四舍五入），并将其分配给高度。

Answer 3

您可以通过将高度设置为零，然后向padding-bottom添加百分比来完成此操作。您可能需要调整它一点点地得到想要的结果，但这里有一个拨弄一个例子 http://jsfiddle.net/wbq8o3s7/

#myDiv{ 
    width:%100; 
    height:0; 
    padding-bottom:35%; 
    background-color:#333; 
}