html - コンテナの高さを本体の高さの 80% に変更し、縦横比を維持するにはどうすればよいですか?

Question

今解決できていない問題があります

SOのいくつかの回答でもvhユニットの使用を促進していますが、APPの後方互換性のため、私はそれを使用したくありません。

これは私のレイアウトCSSにあるものです

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

 html, body {
  height: 100%;
}

 body{
  position: relative;
}

Bootstrap + sass + jadeでAngularJSを使用しています

私のレイアウトはこのモックアップのようになります：

中央に半透明のコンテナがある固定のボディ背景。コンテナーの下部には、ui-router を使用してビューを切り替える 2 つのナビゲーション ボタンがあります。

しかし、基本的には、ビューポートの高さに対してコンテナーの固定高さを設定し、モバイル デバイスまでさまざまな解像度で維持できるようにしたいと考えています。

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