html - 如何将 div 高度设置为 100%？

Question

我创建了空 div。我尝试将高度设置为 100% 对于样式中的空 Div，因为我需要在浏览器屏幕的整页中显示 div，但我无法将高度设置为 100%。有没有可能将空 div 高度设置为 100% 的方法？

  <div id="test">
        <div id="test1">

        </div>
    </div>

score 2 · Accepted Answer

You have to specify height to parents/divs also, i.e.

#test, #test1
{
  height: 100%;
}

and if you want it to full screen you have to use it like this:

#test1, #test, body, html
{
    height: 100%;
}

Hope this helps.

score 1 · Accepted Answer

你可以通过在你的css中给出一个最小高度来尝试它，比如

#test,#test1 {
min-height: 100%;

}

score 0 · Accepted Answer

您也可以为此使用 javascript

 var h = document.getElementById("mainContentID").offsetHeight;
 document.getElementById("menuID").style.height = h + "px";

第 1 行创建了一个新变量“h”并将找到的元素的高度分配给该变量。这不会返回 CSS 中指定的“height:”，而是返回文档在屏幕上显示时的实际高度。

第 2 行用变量 h +“px”填充另一个较短元素的“height:”样式值</p>

将此代码放在文档末尾附近，可能就在正文标记之前，它会在页面加载时立即运行。您也可以将其包装在 jquery $(window).load 中，甚至是 $(document).ready 中。但事实上，没有库依赖——只是普通的旧 JavaScript！

3 回答 3