css浏览器高度变化,使用CSS更改浏览器高度时调整div宽度

为了保持div的宽高比，一直在寻找仅有CSS的解决方案的几天时间。重要的部分是div高度应该是浏览器窗口的高度(不滚动和不隐藏溢出)，并且宽度百分比应该调整以保持纵横比正确。到目前为止我发现的所有东西(主要是填充技巧)都使用父元素的宽度来维持方面，并在div下面增加了很多额外空间，尤其是在大屏幕上的全屏幕中。使用CSS更改浏览器高度时调整div宽度

真的试图避免javascpript。

这里是我的基本设置：

::编辑::添加链接的jsfiddle - http://jsfiddle.net/SUbYB/ ::编辑2 ::只是使用jQuery来处理基于高度的div的设置宽度。谢谢大家！

样式

body, html{

width: 100%;

height: 100%;

max-height: 100%;

max-width: 100%;

}

.super-container{

position: relative;

width: 69.8%;

height: 95%;

max-width: 2008px;

margin: 0 auto;

padding: 0 15.1% 0 15.1%;

background: rgba(200,200,200,.2);

}

.aspect-container{

position: relative;

display: block;

height: 95%;

margin: 0 auto;

background: rgba(200,200,200,.4);

}

.aspect-critical-content{

position: absolute;

top:0; right: 0; bottom: 0; left: 0;

background: rgba(200,0,0,.2);

}

和HTML

感谢提前任何帮助！

+0

你能提供一个小提琴或蹲跳？ –

+0

http://jsfiddle.net/SUbYB/ jsfiddle链接到上面的代码 –

+0

你可以尝试使用calc，如果跨浏览器对你来说不是太重要：https：//developer.mozilla.org/en-US/docs/Web/CSS/calc？redirectlocale = en-US＆redirectslug = CSS％2Fcalc –