HTML5-div底部的额外空白

Question

I am working on Windows Phone 8 Mobile application which uses IE10 browser internally.

I am trying to remove the blank white space from a child div, which is appearing if the previously opened child div's content is more than the currently open child div.

<div id="parentDiv" style="overflow-x:hidden">
<div id="childDiv1" style="overflow-x:hidden">Content in childDiv1 is greater than childDiv2</div> 
<div id="childDiv2" style="overflow-x:hidden"></div>
</div>

I have one parent div say with id parentDiv .. which contains 2 child div's.. say with id = childDiv1 and childDiv2 . If I navigate to childDiv1 from any of my page in the application and from childDiv1 I am navigating to childDiv2 and since childDiv1's content is more than childDiv2's content. it results in blank white space at the bottom of childDiv2. I am trying to remove the blank white space but no work around seems helping so far. Any help will be appreciated. Thanks.

Answer 1

White space can be caused by many things in internet explorer.

Some options:

1. Be sure to add margin/padding to 0 for all divs involved and then remove them one by one until you figure out where you actually needed it.

2. Sometimes Internet Explorer adds space in an empty div because of font. Try to add font-size: 0 to prevent that.