BODY内容高度不够浏览器高时BODY背景不在最下面的解决办法

2024年2月4日 171次阅读 来源: rayliao

最近遇到这个问题，搜索引擎找到了答案，收藏于此文章。

我们在设计网页的时候经常会碰到要张BODY加背景的情况，BODY里面的内容足够多的时候这个问题一般不被发觉，但在BODY内容比较少的时候会发现BODY的底图背景就出现在页面的某些位置（不是最底部）这样导致了网页看起来不友好，那要如何去改呢？下面把我知道的贴在下面供大家一起交流学习：

CSS代码：
body { background: #FFF url(img/bg.gif) repeat-y; center top; }

如果网页内容较少，body的背景图片只占了浏览器的高度的一部分，很难看，现给body加个最小高度：
body { background:#FFF url(img/bg.gif) repeat-y center top;
min-height:100%; height:auto !important; height:100%; }

在ie下显示很好，但在chrome上依旧不起作用，现把html的高度设为100%，一切ok了，最终代码如下：

html { height:100%;  }  
body { 
    background:#FFF url(img/bg.gif) repeat-y center top;   
    min-height:100%; 
    height:auto !important; 
    height:100%;  
}

原文链接

    原文作者：rayliao
    原文地址: https://segmentfault.com/a/1190000002385821
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞