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

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我正在尝试。这是乔姆拉。我希望导航栏锁定在屏幕顶部。

$(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 获得想要的效果。我将 body 设置为窗口的高度，将新的 div 设置为 body 的大小 + header 的高度。 body 有“溢出-y:滚动”。该容器将具有“溢出-y:隐藏”(请参阅​​更新的代码段)。这并不能完全回答我的问题，但至少有帮助？

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>