Question

我有一个非常讨厌的html / css设计错误：

我想要一个高度为25px的页脚，它始终位于网站的底部。

网站应始终使用浏览器屏幕的100%，并且不得显示滚动条。

这是html的简化版本，导致错误：

<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>

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%;
}

页脚总是使用25px of height，上面的content-div会消耗其余内容。

但是，我在页脚下方获得了4px的额外空格，这导致垂直滚动条出现：

screenshot

这出现在所有浏览器（Chrome，Firefox，IE，Opera）中，所以一定是我的错。当我删除图像元素时，空间消失。

导致此问题的原因是什么？如何避免？

请注意，body-element中的overflow: hidden;不是一个选项。

这是 JSFiddle

Answer 1

试试此代码

<强> DEMO

#tools img{
    vertical-align:bottom;
    height: 100%;
}

Answer 2

您是否可以在#tools容器上使用常规样式的固定页脚：

position:fixed; 
bottom:0px;    
height:25px;

Update JsFiddle

<强>标记

<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;
}

Answer 3

这个问题是由于图像表现得像文字的一个字符（因此在它下面留下一个空间，在那里，＃34; y＆＃34;或＆＃34; g＆＃34;的悬挂部分会去，并使用vertical-align CSS属性来解决，表明不需要这样的空间。几乎vertical-align的任何值都可以;

#tools img {
    vertical-align: middle;
    height: 100%;
}

jsFiddle：http://jsfiddle.net/8Cr9W/

Answer 4

这是一个很好的教程，可以让页脚正确地保持正常状态，即使内容不多：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html空间中的空格

4 个答案:

Update JsFiddle