Javascript 将div标记扩展到页面长度

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

我正在尝试为我的web设计类创建一个模拟网页，并尝试将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>

---

无论我在那里输入了什么代码来修复它，它最终都会以900px x 300px的速度出现，除非我将高度更改为像素输入，这不是我想要做的。我在页面上的按钮使用javascript隐藏/显示div标记，我需要页面随着单个div标记的显示而扩展。

我也遇到了同样的问题。你不能在

%

中给它一个高度，除非它的所有祖先在

%

或

px

中都有一定的高度。我不知道为什么HTML是这样设计的，但它只是那样。您可以在

px

中给出高度，但在满足前面提到的约束之前，不能在

%

中给出高度。

更改以下内容

width:900px;

到

---

对于

宽度

可以使用像素数或百分比，但是对于

高度

仅使用像素，可以使用JS/jQuery来实现（获取文档或窗口的高度并将其分配给div）

这会将div的高度扩展到窗口的高度（页面的可见部分）：

这会将div高度扩展到文档的高度（页面上所有内容的高度）

---

您可以作弊并设置：

html, body{
    height: 100%;
    margin: 0px;
    padding: 0px;
}

在css的开头。然后，你可以用一个百分比设置

#content

div高度。如果你设置

100%

，它将占据整个页面的高度，因此如果

#nav

占30%，则将

#content

设置为70%（也要注意页边空白！）

更新：

我发现使用桌子是可能的（好的旧桌子…），因此，取一个只有两行的表格，将其设置为页面的高度

高度：100%

。然后将代码的第一部分设置在第一行，第二部分设置在第二行。设置

高度：0%

，第一行要根据内容调整大小，另一个div将占据其余部分！现在可以设置<代码>高度：对第二行内容进行100%以使其占用所有可用空间。请注意，您需要上面的代码部分来设置表格的高度

这是不完整的，但你可以看看

我希望这将对您有所帮助！

您可以使用单位（不广泛支持） 因此

100vw

等于

100%的视图端口宽度

。

---

但是，我不建议您使用它，相反，您应该使用普通的

%

单元，并构建一个更智能的布局。

我尝试了这两种方法，结果都弄乱了我的按钮显示/隐藏其div标记的方式。单击后没有必要的空间，并且内容div没有随按钮div进行调整。我看不出您的示例如何显示/隐藏它们的div标记对不起，第二个应该是$（document）.height（）我修正了它。我试过了。它一开始是有效的，但只要我点击其中一个按钮来显示一个div标记，内容div就不会随着显示的div进行调整。是的，很遗憾css在交互的情况下不会自我调整……我看到的唯一方法是在jQuery中这样做。在文档准备好后设置您的高度，然后每次更新它当你点击一个按钮时。我用一个使用表格的例子进行了更新。我不能为你的案例尝试它，但我希望它会有用=D。

width:100%;

$(function(){
    $("#content").height($(window).height());
});

$(function(){
    $("#content").height($(document).height());
});

html, body{
    height: 100%;
    margin: 0px;
    padding: 0px;
}