I have a very annoying html/css design-bug:
I want to have a footer with a height of 25px, which always stays on the bottom of the site.
The site should always consume 100% of the browser's screen, and must not display scrollbars.
Here's a simplified version of the html, which causes the bug:
<body>
<div id="content">foo</div>
<div id="tools">
<img src="img/save.png" alt="save file"/>
<img src="img/save.png" alt="save file"/>
</div>
</body>
The css:
*{
padding: 0;
margin: 0;
}
body, html{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#content{
background-color: #bbb;
height: calc(100% - 25px);
}
#tools{
height: 25px;
background-color: #ddd;
}
#tools img{
height: 100%;
}
The footer always uses 25px of height, the content-div above consumes the rest.
However, I get an additional whitespace of 4px below the footer, which leads the vertical scrollbar to appear:
This appears in all Browsers (Chrome, Firefox, IE, Opera), so it must be my fault. When I remove the image-element, the space disappears.
What causes this problem and how can I avoid it?
Note that overflow: hidden; in the body-element is not an option.
Here's a JSFiddle
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
