Padding of absolute div interpreted differently in Internet Explorer 7
Question
In Internet Explorer 8 and above, and all other browsers, the padding of an absolute div element is not pushing the content down the page when there's a negative margin.
But in Internet Explorer 7, the padding pushes the content down anyway.
This code doesn't use JavaScript.
Here's a screenshot of it working in Internet Explorer 8, Firefox, and Chrome (there's no vertical overflow):
Here's a gif of the same code running in Internet Explorer 7:
Here is my code:
p { margin-top: 0; margin-bottom: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } #container { min-height: 100%; position: relative; } #header { background: yellow; height:50px; } #body { padding-bottom: 50px; /* Height of the footer */ } #footer { position: absolute; bottom: 0; width: 100%; height: 50px; /* Height of the footer */ background: green; } #body { height: 100%; width: 100%; position: absolute; margin-top: -50px; padding-top: 50px; } #main-content-container { height: 100%; } .inset-boxshadow-and-background { background-color: red; height: 100%; width: 100%; } </style> <!--[if lt IE 7]> <style media="screen" type="text/css"> #container { height: 100%; } </style> <![endif]-->
<body> <div id="container"> <div id="header"> </div> <div class="body-parent"> <div id="body"> <div id="main-content-container"> <div class="inset-boxshadow-and-background"> <!-- Body start --> <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="https://matthewjamestaylor.com/bottom-footer">full article</a> for all the details.</p> <!-- Body end --> </div> </div> </div> </div> <div id="footer"> </div> </div> </body>
And please no "Internet Explorer 7 is useless" because I'm aware it stinks!
3 answers
solution1
1 ACCPTED 2018-09-26 10:03:42
Try to use the following code:
<style type="text/css">
p {
margin-top: 0;
margin-bottom: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
/* Core styles */
.header {
position: absolute; /* needed for stacking */
height: 50px;
width: 100%;
background-color: yellow;
}
.content {
position: absolute;/* needed for stacking */
top:50px;
width: 100%;
height: 100%;
background-color:red;
}
.footer {
position: absolute;/* needed for stacking */
width: 100%;
height: 50px;
bottom:-50px;
background-color:aqua;
}
#main-content-container {
height: 100%;
}
.inset-boxshadow-and-background {
background-color: red;
height: 100%;
width: 100%;
}
</style>
<div class="header">
<div class="header-inner"></div>
</div>
<div class="content">
<div class="content-inner">
<div id="body">
<div id="main-content-container">
<div class="inset-boxshadow-and-background">
<!-- Body start -->
<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="https://matthewjamestaylor.com/bottom-footer">full article</a> for all the details.</p>
<!-- Body end -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-inner"></div>
</div>
Update : the following code works well on my side, please refer to it.
<style type="text/css">
p {
margin-top: 0;
margin-bottom: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: 100%;
position: relative;
background-color:red;
}
#header {
position: absolute;
top:0;
width:100%;
background-color: yellow;
height: 50px;
}
.body-parent {
margin-top: 50px;
position: absolute;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px; /* Height of the footer */
background-color: green;
}
#body {
height: 100%;
width: 100%;
padding-bottom: 50px;
}
#main-content-container {
height: 100%;
}
.inset-boxshadow-and-background {
background-color: red;
height: 100%;
width: 100%;
}
</style>
<div id="container">
<div id="header">
</div>
<div class="body-parent">
<div id="body">
<div id="main-content-container">
<div class="inset-boxshadow-and-background">
<!-- Body start -->
<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="https://matthewjamestaylor.com/bottom-footer">full article</a> for all the details.</p>
<!-- Body end -->
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
The result as below:
solution2
0 2018-09-26 09:52:13
I made a test with IE 7 and I can produce the issue.
When a static element is given a negative margin on the top/left, it pulls the element in that specified direction.
But if you apply it to the bottom/right, it doesn't move the element down/right as you might think. Instead, it pulls any succeeding element into the main element, overlapping it.
So because of this reason I think that your footer get pulled 50 px in top direction. It is possible that this is how IE 7 works with negative margin.
You can try to remove it may help you to solve this issue.
Reference:
solution3
0 2018-09-27 02:50:36
This bizzare IE7-only (IE6 and IE8+ show up fine) is fixable by directly changing any absolutely positioned div with a negative margin and positive padding of the same digits.
Here is the JS:
window.onload = function(){ $('body').height( $(window).height() - 100 ); };
p { margin-top: 0; margin-bottom: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } #container { min-height: 100%; position: relative; } #header { background: yellow; height:50px; } #body { padding-bottom: 50px; /* Height of the footer */ } #footer { position: absolute; bottom: 0; width: 100%; height: 50px; /* Height of the footer */ background: green; } #body { height: 100%; width: 100%; position: absolute; margin-top: -50px; padding-top: 50px; } #main-content-container { height: 100%; } .inset-boxshadow-and-background { background-color: red; height: 100%; width: 100%; } </style> <!--[if lt IE 7]> <style media="screen" type="text/css"> #container { height: 100%; } </style> <![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <div id="container"> <div id="header"> </div> <div class="body-parent"> <div id="body"> <div id="main-content-container"> <div class="inset-boxshadow-and-background"> <!-- Body start --> <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Just remove the javascript to make it work in every browser except ie7, and keep the javascript to only run successfully it in IE7.</p> <!-- Body end --> </div> </div> </div> </div> <div id="footer"> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.