我的目标是让一个白色div（#containMe）延伸到文档的整个高度，无论窗口大小或页面上有多少内容。
我将我的HTML头和JQuery放在一个PHP文档中，并使用PHP的require_one将该头放在每个页面上。然而，当我使用Jquery将#containMe设置为文档的高度时，它会尝试将其设置为正文高度。每次刷新时，身体的高度似乎也会发生变化，导致#containMe的高度发生不可预测的变化。
文档的高度似乎保持一致，但正文的高度会波动，#containMe试图坚持正文的高度而不是文档的高度。Chrome、Android Chrome和Firefox都会出现这种情况。我尝试了以下方法：
$('body').height($(document).height());
但它似乎没有任何效果。
这是我脑海中的Jquery：
<script>
$(document).ready(function () {
$("#containMe").height($(document).height());
$("#containMe").width($(document).width() - 200);
$('.dropdown').hover(function () {
$('.dropdown-toggle', this).trigger('click');
});
});
</script>
（注意引导程序下拉列表仍在工作）
这是我的相关CSS:
body
{
background: #333577 url(bg1.png);
height: 100%;
}
html
{
height: 100%;
}
#containMe
{
background: white;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
padding-top: 15px;
box-shadow: 0px 0px 25px #111111;
}
以下是相关的HTML:
<div id="containMe" class="container-fluid">
<div class="container-fluid jumbotron text-center"><h1>Web Pofrtfolio</h1>
<h2>By Rhea Herrmann</h2></div>
这里有一个链接到出现问题的页面。http://www.rheaherrmann.com/other/wiki.php
如果滚动到底部并继续刷新，div的高度会出现波动。我不确定我做错了什么。
如果我做对了，我认为你可以做以下事情，一切都应该像你期望的那样：
- 从CSS中删除
#containMe的高度，不要使用任何高度 - 删除
.jumbotron中的.container-fluid。由于上面已经有了一个.container-fluid类，因此不需要另外的.container-fluid，并且正如bootstrap的文档所述：容器不是嵌套的：http://getbootstrap.com/css/#overview-集装箱 - 删除
.innards旁边的.container-fluid类（原因与上述相同）。如果您需要保持衬垫的原样，可以使用.col-sm-12 - 删除或注释任何修改
#containMe高度的javascript代码
请告诉我这对你是否有效。
$(document).ready(function () {
var windowheight = $(document).height();
var windowwidth = $(document).width() - 200;
//alert (windowheight);
$('#containMe').css('height', windowheight + 'px');
$("#containMe").css('width' ,windowwidth + 'px' );
$('.dropdown').hover(function () {
$('.dropdown-toggle', this).trigger('click');
});
});在JS 中使用此
-在#containMe的css中使用100vh而不是100%。
-不要用引导程序嵌套容器。请注意，由于填充等原因，两个容器都不可嵌套http://getbootstrap.com/css/#overview-集装箱
摆脱
height: [whatever];
在样式表中的#containMe类中，并将其从元素样式（#containMediv的样式属性）中删除。它必须从两个地方都消失。