Setting <div> size to be the same as window?

Question

I'm trying to use jQuery to set the height of a div so that it takes up the entire window + the height of a header (so that you can scroll the header off the page) but no more than that. I would think the height of the div would be the height of the window + the height of the header I'm trying to hide.

When I set the div to window height, however, it creates overflow. Here's the rough code:

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>

Why is there overflow if the div is sized to fit in the window?

EDIT: So far, answers haven't helped. This is the site I'm working on. It's joomla. I want the nav bar to lock at the top of the screen.

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

It works for a lot of sizes, but one you get to small resolutions it falls apart.

EDIT 2: I was able to get the effect I was going for by adding another div. I set the body to be the height of the window and the new div to be the size of the body + the height of the header. The body has "overflow-y: scroll". The container would have "overflow-y: hidden" (See updated snippet). This doesn't totally answer my question, but at least it helps?

Answer 1

I figured out the biggest problem. I was using some absolutely positioned elements without giving a parent any other position. This made things show up wonky when I was trying to size other things. I also needed to have an extra div as a container for all the content on the page that would be the height of the window + the height of the header.

Thanks to everyone who answered, it helped!

Answer 2

I've taken a look at your code and altered it. Try this and see if this is what you're looking for.

In my example i'm looking for the element by getElementById and then I set it's style.height to window.innerHeight - 10px without taking the 10px it wouldn't show the border fully on the page. So you just remove 10px's. The example has been tested on different screen sizes.

Javascript example:

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 3

The following worked for me:

$(".body").height($(window).height());