Internet Explorer 11 creating empty white space on div - html

Question

I'm trying to create a print-friendly version of a webpage, however, the webpage and the print preview in Internet Explorer 11 have some mysterious blank space beneath the div's.
I have checked all the CSS classes, html markup, etc.
Setting the height makes no difference
Setting margin and padding to 0 makes no difference
It is just a huge white block beneath each div - there's nothing associated with it, so I do not understand why IE is putting it there.
Example:
<div class="row"> ## this has the big white space beneath it, after its closing tag
<div class="medium-12 columns"> ## this is the correct height
<!-- content -->
</div>
</div>
## WHITE SPACE HERE ##
## around 20-30 lines long ##
<!-- next div begins here -->
CSS rules on the affected tag:
padding: 0 0 5px 0;
page-break-inside: avoid;
margin: 0 -.9375rem;
max-width: none;
width: none;
overflow: hidden;
Does anybody have any ideas as to why this may be?

Answer 1

I see that you have tried zeroing out the margins, but I would suggest that You must try and add a reset for your stylesheet. CSS resets remove nearly all browser presets that usually interfere with custom stylesheets that include various types of document styles.
You just need to add it as a separate file link in your document, or simply copy and paste the code in your main CSS file, before all of your custom styles.
There are a few options out there regarding CSS resets, but I think that Mr. Mayer's reset would do the best job here.

Answer 2

Edited:
As i see that you are using Foundation, i have seen that foundation grid have some kind of issue adding negative margin values like that margin: 0 -0.9375rem;
Basically the 0.9375 is the main margin for your grid, rendered from SCSS to CSS. To avoid additionally compounding margins on nested columns, Foundation applies a negative padding to equalize.
If you're having problems with nested rows, make sure each sub .row is contained withinin a "small-xx ... columns" class, this should bring the edges back to normal.
Don't do this:
<div class="row">
<div class="small-6 columns"></div>
<div class="row">
<div class="small-3 columns"></div>
<div class="small-3 columns"></div>
</div><!-- .row -->
</div><!-- .row -->
Instead do this:
<div class="row">
<div class="small-6 columns"></div>
<div class="small-6 columns">
<div class="row">
<div class="small-6 columns"></div>
<div class="small-6 columns"></div>
</div><!-- .row -->
</div><!-- .small-6 .columns -->
</div><!-- .row -->