将 div 标签扩展到页面的长度答案

【问题标题】：Extend a div tag to the length of the page将 div 标签扩展到页面的长度
【发布时间】：2014-03-13 15:33:17
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

我都试过了，结果弄乱了我的按钮显示/隐藏它们的 div 标签的方式。点击后有不必要的空间，内容div没有用按钮div调整。
我看不出你们的例子有什么不同。
对不起，第二个应该是 $(document).height() 我修好了。

【解决方案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

希望对你有帮助！

【讨论】：

我试过了。一开始它可以工作，但是当我单击其中一个按钮以显示其中一个 div 标签时，内容 div 不会随着显示的 div 调整。
是的，可悲的是，css 不会在交互的情况下自行调整......我看到的唯一方法是在 jQuery 中做到这一点。当文档准备好时设置你的高度，每次点击你的一个按钮时更新它。
我更新了一个使用表格的例子。我不能为你的情况尝试它，但我希望它会有用 =D。

【解决方案4】：

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

【讨论】：

【解决方案5】：

更改以下内容

width:900px;

到

width:100%;

【讨论】：