html - 如何将容器高度更改为主体高度的 80%，并保持纵横比？

Question

我现在有一个无法解决的问题

甚至 SO 中的一些答案也促进了vhunit 的使用，但由于 APP 的向后兼容性，我不想使用它。

这就是我在我的布局 css 中所拥有的

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

 html, body {
  height: 100%;
}

 body{
  position: relative;
}

我正在使用 AngularJS 和 bootstrap + sass + 玉

所以我的布局看起来像这个样机：

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

但基本上我希望能够为容器设置一个相对于视口高度的固定高度，并将其保持在不同的分辨率直到移动设备。

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%;
}