I am laying out a simple web page using Foundation, but I am encountering an issue with the dimensions of the body.
No matter what I do, the height of the body will not go to 100% of the page. The height varies a bit depending on the browser, but it's always stuck around 400px. The elements on the page all lay out correctly, despite the fact that the body actually cuts off about halfway down the page, elements overflowing as though the body wasn't even there. Looking at the console on Chrome, I noticed that the clientHeight property is 400 - it seems to me that, when the page loads, the actual height of the page is somehow being overridden and forced to 400px, but I don't know how or why this is happening. Has anyone seen this occur before?
I'm using Foundation 5.5.2, and my page's head looks like so:
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
<link rel="stylesheet" type="text/css" href="foundation.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<script src="scripts/modernizr.js"></script>
<script src="scripts/jquery.js"></script>
<script src="scripts/fastclick.js"></script>
<script src="scripts/foundation.min.js"></script>
EDIT - I've realized that the clientHeight property is being set as the height of the visible window when the page loads - 400px is the size of my window when the console is open. REGARDLESS - why isn't the body sizing according to the elements that it contains?
And I fixed it.
The solution was to set the height: auto; for the body.
Once I realized that the body height was being set to the onload window size, I saw that other people had encountered this as well.