如何使用 Div 相对高度 100%？答案

【问题标题】：how to use Div relative height 100%?如何使用 Div 相对高度 100%？
【发布时间】：2012-06-25 17:57:44
【问题描述】：

我是网站设计的初学者。我想要一个动态的内容高度。所以我做了这样的事情：

<div style="position:relative;width:100%;height:100%;" id="content">
    ....
</div>

<div style="position:relative;width:2000px;height:498px;">
    <?php include('footer.php'); ?>
</div>

然而，页脚的 div 并没有检测到内容的高度。我应该怎么办？谢谢。

【问题讨论】：

参考这个Footer at the bottom
阅读本文Sticky Footer by Ryan Fait
尝试删除宽度和高度，也许可行。

标签： css html web height

【解决方案1】：

您可以使用 JQuery 将高度传递给元素

$(document).ready(function() {
var hgt = $(window).height();
$("#content").css({"height" : hgt });
});

【讨论】：

【解决方案2】：

您已将内容的高度定义为 100%，因此这可能是它未检测到内容高度的原因，因为内容会尝试适应 100% 高度

尝试使用

<div style="position:absolute;bottom:0px;width:2000px;height:498px;">

【讨论】：

【解决方案3】：

我不知道使用 css 来做这件事，而且我认为 css 不会检测到屏幕或其他东西的死亡。

$(document).ready(function() {
var sch=screen.height;
d = document.getElementById('content');
d.style.height=screen.height;
});

这应该可行。使用 jQuery

【讨论】：

【解决方案4】：

您好，请使用此链接来对齐您的 CSS。改变 Ryan Fait 所说的。

http://ryanfait.com/sticky-footer/

你可以在这里找到 CSS，

http://ryanfait.com/sticky-footer/layout.css

这就是你如何使用它，

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

【讨论】：