html正文中的空白_Html_Css - Fatal编程技术网

html正文中的空白

html css

html正文中的空白,html,css,Html,Css,我有一个非常恼人的html/css设计错误：我想有一个页脚的高度25px，它总是停留在网站的底部网站应始终使用浏览器屏幕的100%，并且不得显示滚动条这里是html的简化版本，它会导致错误： <body> <div id="content">foo</div> <div id="tools"> <img src="img/save.png" alt="save file"/>

我有一个非常恼人的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>

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

，上面的内容div消耗其余部分

但是，我在页脚下面还有一个4px的空白，这会导致垂直滚动条出现：

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

是什么导致此问题？我如何避免此问题

注意

溢出：隐藏不是选项
这里有一个
试试这段代码
#tools img{
    vertical-align:bottom;
    height: 100%;
}


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

试试这个代码

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

您能否在#tools
容器上使用固定页脚的常规样式：
position:fixed; 
bottom:0px;    
height:25px;

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

您能否在#tools
容器上使用固定页脚的常规样式：
position:fixed; 
bottom:0px;    
height:25px;

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

这个问题是由于图像的行为类似于文本字符（因此在其下方留下一个空间，使“y”或“g”的悬挂部分消失），并通过使用垂直对齐
CSS属性指示不需要这样的空间来解决。几乎任何垂直对齐的值都可以
#tools img {
    vertical-align: middle;
    height: 100%;
}

jsiddle:
这个问题是由于图像的行为类似于文本字符（因此在图像下方留下一个空间，使“y”或“g”的悬挂部分消失），通过使用vertical align
CSS属性指示不需要这样的空间来解决。几乎任何垂直对齐的值都可以
#tools img {
    vertical-align: middle;
    height: 100%;
}

jshiddle:
这是一个很好的教程，即使内容不多，也能让页脚保持适当的向下位置：
这是一个很好的教程，即使内容不多，也能让页脚保持适当的向下位置：
哇，这是出乎意料的。然而，在我的实际程序中，我有几个图像（兄弟），并且display:block垂直对齐：底部
而不是显示：块
。参考相同的演示链接在我的简化版本中，这确实解决了问题，但在实际程序中没有，所以我不能接受。然而，这是出乎意料的。然而，在我的实际程序中，我有几个图像（兄弟），并且display:block垂直对齐：底部
而不是显示：块
。参考相同的演示链接在我的简化版本中，这确实解决了问题，但在实际程序中没有，所以我不能接受。但是+1使用位置的目的是什么：绝对在身体上
元素？@KheemaPandey我想位置：绝对来指定顶部
，左侧
-属性。但似乎我错了——把它拿走了。THX如果您直接在正文html上添加margin:0
和padding:0
呢？使用*
选择器删除边距和填充不是一个好的做法。使用位置的目的是什么：绝对在身体上
元素？@KheemaPandey我想位置：绝对来指定顶部
，左侧
-属性。但似乎我错了——把它拿走了。THX如果您直接在正文html上添加margin:0
和padding:0
呢？使用*
选择器删除边距和填充不是一个好的做法。