Billy R Billy R - 7 days ago 4
CSS Question

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

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

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!

Comments