Unusual cross-browser error with 'padding' at the bottom of the page
Question
I searched on StackOverflow for this but nothing seemed to be exactly the same as this problem. On my website, there is some unexpected 'padding' at the bottom of the page. This padding varies depending on the browser you are using. It's hard to show a decent comparison but here's an image nonetheless:
Here's the code:
body{ background-color:blue; } #main::before{ width:900px; height:113px; content: " "; position:absolute; top:-113px; left:0px; background-image: url('http://i.stack.imgur.com/7DE7i.png'); background-repeat: no-repeat; } #main{ position: absolute; top: 50%; left: 50%; width:900px; margin-top:100px; margin-bottom:150px; background-image: url('http://i.stack.imgur.com/zZCB2.png'); background-repeat: repeat-y; height:80%; margin-right: -50%; text-align:center; transform: translate(-50%, -50%); } #main::after{ width:900px; height:100px; content: " "; position:absolute; bottom:-100px; left:0px; background-image: url('http://i.stack.imgur.com/DVJAq.png'); background-repeat: no-repeat; }
<body> <div id="main"></div> </body>
I'm guessing it's to do with the margin/padding/positioning, but as you can tell, that's pretty much the entirety of the code. What is causing this, and how is it fixed? Or are there any alternative ways to format my images and get the same result without the problem?
2 answers
solution1
1 ACCPTED 2015-05-21 16:47:47
I'm pretty sure your culprit here is this style: transform: translate(-50%, -50%);
Change this style to this: transform: translateX(-50%); and then change your top definition to top:113px; to match your ::before height.
#main{
position: absolute;
top: 113px; /*matching ::before height*/
left: 50%;
width:900px;
margin-top:100px;
/*margin-bottom:150px;*/
background-image: url('http://www.thefunnyzone.co.uk/images/body.png');
background-repeat: repeat-y;
height:80%;
margin-right: -50%;
text-align:center;
transform: translateX(-50%);
}
See this fiddle .
In regards to the translate property - the original space occupied by the element will remain intact, as if the element hasn't moved
solution2
0 2015-05-21 16:35:45
It looks to me like it's your margin properties in the #main css rule:
margin-top:100px;
margin-bottom:150px;
Remove these lines and your padding should be gone.
Example here: https://jsfiddle.net/6y8eok9f/
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.