Question

我一直在寻找我的问题的答案，但无论我尝试什么，它都行不通。

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

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

Answer 1

我遇到了同样的问题。你不能在%中给它一个高度，除非它的所有祖先都在%或px中有一些高度。我不知道为什么HTML是这样设计的，但只是这样。您可以在px中给出高度，但不能在%中给出高度，直到满足前面提到的约束。

Answer 2

对于width，您可以使用像素数或百分比，但对于仅height像素，您可以使用JS / jQuery来执行此操作（获取文档的高度或窗口并将其分配给div

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

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

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

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

Answer 3

你可以作弊并设置：

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

在你的CSS的开头。然后，您可以使用百分比设置#content div高度。如果您设置100%它会占用整个页面的高度，请务必小心，因此如果#nav占用30％，请将#content设置为70％（请注意边距！）

更新：

我发现可以使用表格（好的旧桌子......），所以，只需要一条只有两条线的桌子，然后将它放到页面height: 100%的高度。然后在第一行中设置代码的第一部分，在第二行中设置第二部分。为第一行设置height: 0%以将其大小调整为内容，另一个div将占用其余部分！现在，您可以将height: 100%设置为第二行的内容，以便占用所有可用空间。请注意，您需要上面代码的一部分来设置表格的高度。

这还不完整，但您可以查看this JSFiddle

我希望这会对你有所帮助！

Answer 4

您可以使用VW单位（不受广泛支持）所以100vw等于100% of view port width。但是，我不建议您使用它，相反，您应该使用普通的%单位并构建更智能的布局。

Answer 5

更改以下内容

width:900px;

要

width:100%;

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

5 个答案: