Question

我的目标是让白色div（#containMe）拉伸到文档的整个高度，无论窗口大小或页面上有多少内容。

我将我的HTML头和JQuery放在PHP文档中，并使用PHP的require_once将该标题放到每个页面上。但是，当我使用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的高度似乎会波动。我不确定我做错了什么。

Answer 1

- 在#containMe的css中使用100vh而不是100％。

- 不要使用bootstrap嵌套容器。 “请注意，由于填充等原因，两个容器都不能嵌套。” http://getbootstrap.com/css/#overview-container

Answer 2

＆＃13;

$(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');
  });
});

＆＃13;

在JS中使用它

Answer 3

摆脱

height: [whatever];

在样式表的#containMe类中，将其从元素样式（#containMe div的样式属性）中删除。它必须从两个地方消失。

Answer 4

如果我做对了，我认为你可以做到以下几点，一切都应该像你期望的那样：

从CSS中删除#containMe的高度，根本不要使用任何高度。
移除.container-fluid中的.jumbotron。由于您已经拥有上面的.container-fluid类，因此不需要另一个.container-fluid，并且作为bootstrap的文档说明：容器不是可嵌套的：http://getbootstrap.com/css/#overview-container。
删除.container-fluid旁边的.innards课程（原因与上述相同）。如果您需要保持原样，可以使用.col-sm-12。
删除或评论修改#containMe。

如果这对您有用，请告诉我。

$（'body'）。height（）变化不可预测

4 个答案: