javascript - 将 div 标签扩展到页面的长度

Question

我一直在寻找我的问题的答案，但无论我尝试什么，都没有用。

我正在尝试为我的网页设计类(class)创建一个模拟网页，并试图将 div 标签的长度扩展到页面的长度，但 auto 和 100% 似乎不起作用。除非我为 div 指定一个像素高度，否则它会保持在 300px，这太短了并且不会延伸到页面底部。

这是我的 html:

  <div id="nav" align="center">
       <ul>
           <li> Home </li>
           <li> The Council </li>
           <li> Jedi </li>
           <li> The Academy </li>
           <li> Admissions </li>
       <ul>
    </div>

    <div id="content"> <br />

       <button class="subnav" id="contactus"> Contact Us </button>

       <div id="contactus_div"></div>

       <button class="subnav" id="campus"> Life on Campus </button>

       <div id="campus_div"></div>

       <button class="subnav" id="faq"> Frequently Asked Questions </button>

       <div id="faq_div"></div>

       <button class="subnav" id="history"> History of the Jedi Order </button>

       </div id="history_div"></div>

    </div>

我需要 id="content"的 div 来跨越页面的长度。这是我为它准备的 CSS:

#content {
    background-color:rgba(64, 64, 64, 0.85);
    align:center;   
    margin: 0 auto;
    position: relative;
    top: 52px;
    left: -2px;
    width:900px;
    height: 100%;
    -webkit-box-shadow:0 0 40px blue; 
    -moz-box-shadow: 0 0 40px blue; 
    box-shadow:0 0 50px rgb(0, 191, 255);
    z-index:0;
    font-family: arial;
    min-height:100%
}

无论我在其中放入什么代码来尝试修复它，它最终都会以 900px x 300px 的形式出现，除非我将高度更改为像素输入，这不是我想要做的。我在页面上的按钮使用 javascript 隐藏/显示 div 标签，我需要页面扩展以显示各个 div 标签。

Answer 1

我遇到了同样的问题。您不能以 % 为单位指定高度，除非它的所有祖先都具有以 % 或 px 为单位的高度。我不知道为什么 HTML 是这样设计的，但它只是那样。在满足前面提到的约束条件之前，您可以以 px 为单位提供高度，但不能以 % 为单位。