在全高容器中排列圖標

Question

我想在一個容器內以網站的整個高度（而不是視口）的高度排列幾個圖標。

目前，我僅使用以下代碼獲取視口的高度：

 .full-container { position: absolute; height: 100%; display: block; top: 0; bottom: 0; /* for example */ width: 100%; background: red; }

 <div class="full-container"></div>

有沒有辦法提高整個場地的高度？

這是我的想法的一個例子：

白色區域是瀏覽器中的可見屏幕。 灰色區域是側面的其余部分。 我想要一個具有整個頁面高度（黃色區域）的DIV。

Answer 1

創建div 100％的問題在於，它僅覆蓋該div所在元素所剩的區域。通常，在絕對位置中，不需要此位置，但您嘗試過以下方法：

/* CSS */
* {
    margin: 0;
    padding: 0;
}

我還必須問您是否正在使用盒裝尺寸。 這可能是問題的原因。

我還是想知道您正在努力實現什么：

 body {background-color: red;} main { width: calc(100% + 100px); background-color: blue; position: absolute; left: -100px; top: 0; }

 <body> <main><p>test</p></main> </body>

Edite：您嘗試執行的操作似乎有點小問題。 100％似乎並不真正支持它，只是返回pagewidth的值。