如何将容器高度改为身高的80％，并保持高宽比？

Question

我有一个问题，现在，我一直没能解决

即使一些答案在SO推广使用vh单元，但由于该应用程序，我不希望使用向后兼容性。

这就是我在我的布局CSS

html {; 
    height: 100%; 
    -ms-touch-action: manipulation; 
    touch-action: manipulation; 
} 

html, body { 
    height: 100%; 
} 

body{ 
    position: relative; 
} 

我使用的是与引导+青菜+玉AngularJS

所以我的布局是这样的样机：

一个固定的身体背景，中间有一个半透明容器。 在容器的底部，我有2个导航按钮，使用UI路由器切换视图

但基本上我想能够设置容器相对于视口的高度固定的高度并保持它直到移动设备不同的分辨率

Answer 1

只需添加

div.container { 
    box-sizing: border-box; //if this isn't already inherited for some reason 
    height: 100%; 
    padding-top: 10%; 
    padding-bottom: 10%; 
}