While creating a basic web page with Foundation, I have run into an issue regarding the dimensions of the body.
No matter what adjustments I make, the body's height remains fixed at around 400px, even though it should ideally fill up the entire page. This has caused elements on the page to overflow as if the body's height is not being recognized properly. Upon inspecting the console in Chrome, I noticed that the clientHeight property is consistently set at 400, indicating that the actual height of the page is somehow being restricted. It seems like the height is being overridden and stuck at 400px upon loading, but I am unsure why this is happening. Has anyone else encountered this problem before?
The version of Foundation I am using is 5.5.2, and here is the head section of my page:
<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 come to realize that the clientHeight property is initially set based on the visible window size when the page loads - which in this case is 400px due to my current window size. However, the issue persists as the body does not adjust its size according to the content within it.