空白html身体 [英] whitespace out of html body
问题描述
我想要一个高度为 25px ，它总是停留在网站的底部。
网站应该总是消耗 100％浏览器的屏幕，并且不能显示滚动条。
以下是html的简化版本，它会导致该错误：
<身体GT;
< div id =content> foo< / div>
< div id =tools>
< img src =img / save.pngalt =保存文件/>
< img src =img / save.pngalt =保存文件/>
< / div>
< / body>
css：
* {
padding：0;
保证金：0;
}
body，html {
position：absolute;
top：0;
剩下：0;
right：0;
bottom：0;
}
#content {
background-color：#bbb;
height：calc（100％ - 25px）;
}
#tools {
height：25px;
background-color：#ddd;
}
#tools img {
height：100％;
}
页脚总是使用 25px的高度，上面的内容div会消耗其余的内容。
但是，我在页脚下方得到4px的空白，导致垂直滚动条出现：
这出现在所有浏览器（Chrome，Firefox，IE，Opera）中，所以它一定是我的错。当我删除图像元素时，空间消失。
造成这个问题的原因是什么，我该如何避免它？
请注意，body元素中的 overflow：hidden; 不是一个选项。 strong> JSFiddle
你能不能在 #tools 容器中使用固定页脚的常规风格：
position：fixed;
bottom：0px;
height：25px;
更新JsFiddle
标记
$ b
< div id =content> foo< / div>
< div id =tools>
< img src =img / save.pngalt =保存文件/>
< img src =img / save.pngalt =保存文件/>
< img src =img / save.pngalt =保存文件/>
< img src =img / save.pngalt =保存文件/>
< / div>
CSS
#content {
background-color：#bbb;
身高：100％;
}
#tools {
position：fixed;
left：0px;
bottom：0px;
height：25px;
宽度：100％;
background-color：#ddd;
}
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
Can you not just use the regular style of fixed footer on your #tools container:
position:fixed;
bottom:0px;
height:25px;
Update JsFiddle
Markup
<div id="content">foo</div>
<div id="tools">
<img src="img/save.png" alt="save file"/>
<img src="img/save.png" alt="save file"/>
<img src="img/save.png" alt="save file"/>
<img src="img/save.png" alt="save file"/>
</div>
CSS
#content{
background-color: #bbb;
height: 100%;
}
#tools{
position:fixed;
left:0px;
bottom:0px;
height:25px;
width:100%;
background-color: #ddd;
}
这篇关于空白html身体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
