Question

我正在尝试使用jQuery设置div的高度，以便它占用整个窗口+标题的高度（这样你可以在页面上滚动标题）但不多于此。我认为div的高度将是窗口的高度+我试图隐藏的标题的高度。

但是，当我将div设置为窗口高度时，会产生溢出。这是粗略的代码：

var $body = $("#body"),
  $container = $("#container"),
  $window = $(window),
  $content = $("#mainContent"),
  $header = $("#header"),
  bodyHeight = window.innerHeight + $header.height();

$body.css("height", window.innerHeight);
$container.css("height", bodyHeight);

div {
  display: block;
  width: 100%;
  margin: 0;
}
#body {
  overflow-y: scroll;
}
#container {
  overflow-y: hidden;
}
#header {
  overflow: hidden;
}
#navbar {
  height: 10px;
  background-color: brown;
}
#mainContent {
  height: 200px;
  overflow-y: scroll;
}
#contentP {
  height: 400px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
  <div id="container">
    <div id="header">
      <h1>Header</h1>
    </div>
    <div id="navbar">
    </div>
    <div id="mainContent">
      <p id="contentP">This is content</p>
    </div>
  </div>
</div>

如果div的大小适合窗口，为什么会出现溢出？

编辑：到目前为止，答案没有帮助。 This is the site我正在努力。这是joomla。我希望导航栏锁定在屏幕顶部。

$(document).ready(function() {

//Declare some variables
var $window = $(window),
    $body = $(".body"),
    $mainContent = $("#maincontent"),
    headerGap = parseFloat($("#headerimg").css("margin-top")),
    headerHeight = headerGap + $("#header").height() + parseFloat($("#navbar").css("margin-top")),
    navbarHeight = $("#navbar").height(),
    footerHeight = $("#footer").height();

//set the height of the body and the maincontent
resizePage();

//Set the listeners for resizing and scrolling
$window.resize(resizePage);
$window.scroll(scrollHandler);


//When you scroll, see if the navbar is at the top. Set maincontent overflow
//to scroll when the navbar is at the top of the window. Set it to hidden otherwise
function scrollHandler() {
    if ($window.scrollTop() < headerHeight - 1) {
        $mainContent.css("overflow", "hidden");
    } else {
        $mainContent.css("overflow", "auto");
    }
}

//Set the body and the mainContent to be the correct sizes when the window size is changed. In theory, the body should be:
// windowHeight + headerHeight
// maincontent should be:
// windowHeight - (headerHeight + navbarHeight + footerHeight)
// But that doesn't quite work out. 
function resizePage() {
    //Deal with the changing CSS due to media queries
    if ($(window).width() > 768) {
        headerGap = parseFloat($("#headerimg").css("margin-top"));
        headerHeight = headerGap + $("#header").height() + parseFloat($("#navbar").css("margin-top")) - 1;
        $(".nav.menu.nav-pills").css("width", "92.5%");
    }
    else {
        headerHeight = $("#header").height();
    $(".nav.menu.nav-pills").css("width", $window.width());
    }
    //The header and navbar height change at certain sizes, so grab them again to be safe.
    navbarHeight = $("#navbar").height();
    footerHeight = $("#footer").height();
    var windowHeight = $window.height(),
        contentHeight = windowHeight - (footerHeight + navbarHeight);
            //if we account for headerHeight too, maincontent is too big
    resizeContent(contentHeight);
    resizeBody(windowHeight);
}

//The body should take up the whole height of the window, plus the header 
//and margin heights at the top. This way, you scroll to the navbar.
// But it doesn't work this way.
// -7 and -27 are from eyeballing it.
function resizeBody(windowHeight) {
    if($window.width() > 728) {
        $body.css("height", windowHeight - 7);
        }
    else {
        $body.css("height", windowHeight - 27);
    }
}

// The content should go from the bottom of the navbar to the bottom of the footer.
// 
function resizeContent(contentHeight) {
    $mainContent.css("top", (headerHeight + navbarHeight));
    $mainContent.css("bottom", (0 - headerHeight));
//For the background slideshow on the Furniture page
// Again, + 5 was eyeballed
    $("div.moduletable").css("height", contentHeight + 5);
    if ( (contentHeight + 5) < ($(window).width()) /2 ) {
        $(".wk-slideshow img").css("width", "100%");
        $(".wk-slideshow img").css("height", "auto");
        }
    else {
        $(".wk-slideshow img").css("height", contentHeight + 5);
        $(".wk-slideshow img").css("width", "auto");
    }
}
});

它适用于很多尺寸，但是你得到的小分辨率就会崩溃。

编辑2：我能够通过添加另一个div来获得我想要的效果。我将主体设置为窗口的高度，新的div设置为主体的大小+标头的高度。身体有“溢出y：滚动”。容器将具有“overflow-y：hidden”（请参阅更新的代码段）。这并不完全回答我的问题，但至少它有帮助吗？

Answer 1

我已经看了你的代码并对其进行了修改。试试这个，看看这是不是你想要的。

在我的示例中，我正在按getElementById查找元素，然后我将style.height设置为window.innerHeight - 10px，而不使用10px它不会显示边框完全在页面上。所以你只需删除10px。该示例已在不同的屏幕尺寸上进行了测试。

Javascript示例：

function autoResizeDiv() {
  document.getElementById('body').style.height = window.innerHeight - 10 + 'px';
  console.log(window.innerHeight - 10 + 'px');
}
window.onresize = autoResizeDiv;
autoResizeDiv();

#body {
  display: block;
  border: 5px solid black;
}
body {
  overflow: hidden;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="body">

</div>

Answer 2

以下对我有用：

Function0

Answer 3

我想出了最大的问题。我使用了一些绝对定位的元素而没有给父母任何其他位置。当我试图调整其他东西时，这会让事情显得很糟糕。我还需要一个额外的div作为页面上所有内容的容器，这些内容将是窗口的高度+标题的高度。

感谢所有回答的人，这有帮助！

将<div>大小设置为与窗口相同？

3 个答案: