资讯专栏INFORMATION COLUMN

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

Zachary / 2267人阅读

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

  

我们在设计网页的时候经常会碰到要张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%;  
}

原文链接

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110950.html

相关文章

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

    最近遇到这个问题,搜索引擎找到了答案,收藏于此文章。 我们在设计网页的时候经常会碰到要张BODY加背景的情况,BODY里面的内容足够多的时候这个问题一般不被发觉,但在BODY内容比较少的时候会发现BODY的底图背景就出现在页面的某些位置(不是最底部)这样导致了网页看起来不友好,那要如何去改呢?下面把我知道的贴在下面供大家一起交流学习: CSS代码: body { bac...

    Prasanta 评论0 收藏0
  • DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    摘要:下兼容问题,这个最好处理,转化成兼容就可以。暂时还没找到专用的兼容。高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用或时。只是目前并不支持。以上都是写中的一些兼容,建议遵循 1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 2.flaot浮动造成IE6下面...

    silvertheo 评论0 收藏0
  • safari,IOS下iframe宽高度内容撑出设备高度

    摘要:问题浏览器下的的宽高都会被内容撑大这是一个浏览器存在的缺陷,无论如何设置的宽高,都会被内容的宽高撑大,这会导致页面变得很大。 问题:safari浏览器下的iframe的宽高都会被内容撑大 这是一个safari浏览器存在的缺陷,无论如何设置iframe的宽高,都会被内容的宽高撑大,这会导致页面变得很大。 解决方案 设置iframe scrolling=0属性 使用overflow:sc...

    james 评论0 收藏0
  • safari,IOS下iframe宽高度内容撑出设备高度

    摘要:问题浏览器下的的宽高都会被内容撑大这是一个浏览器存在的缺陷,无论如何设置的宽高,都会被内容的宽高撑大,这会导致页面变得很大。 问题:safari浏览器下的iframe的宽高都会被内容撑大 这是一个safari浏览器存在的缺陷,无论如何设置iframe的宽高,都会被内容的宽高撑大,这会导致页面变得很大。 解决方案 设置iframe scrolling=0属性 使用overflow:sc...

    zero 评论0 收藏0
  • safari,IOS下iframe宽高度内容撑出设备高度

    摘要:问题浏览器下的的宽高都会被内容撑大这是一个浏览器存在的缺陷,无论如何设置的宽高,都会被内容的宽高撑大,这会导致页面变得很大。 问题:safari浏览器下的iframe的宽高都会被内容撑大 这是一个safari浏览器存在的缺陷,无论如何设置iframe的宽高,都会被内容的宽高撑大,这会导致页面变得很大。 解决方案 设置iframe scrolling=0属性 使用overflow:sc...

    vincent_xyb 评论0 收藏0

发表评论

0条评论

Zachary

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<