WEB前端

解决css背景100%平铺浏览器缩放(缩小)后显示不全

位置:首页 > WEB前端 > css教程,2016-08-30


大家在制作网页菜单栏时,经常会设计一个100%宽的通栏背景菜单,按正常的代码书写,看起来貌似没有什么问题,但当你把浏览器的窗口缩小时,拖动滚动条你会发现上面的背景少了一块。这个bug问题存在于width:100%这个属性,它只获取浏览器的当前100%宽度,但是没有加上滚动条的那一块长度。

浏览器窗口缩小后,拖动底部滚动条,发现右边显示不全了,如图:
 

解决css背景100%平铺浏览器缩放(缩小)后显示不全(图1)

 

网上提供了几种解决方法,小编对比测试了一下,把比较完善的方法分享一下,希望用的着的童鞋会喜欢。

 

解决方案:既然是宽度理解上的差异,只需要告知浏览器页面容器的宽度,头部元素的宽度不能小于内容层的宽度即可。当浏览器窗口缩小时,保持页面容器和头部元素的最小宽度为内容层的宽度。这样就在本质上解决了宽度上出现问题。

css代码:


<style> 
    #wrap { 
        width:100%; 
        width:expression(document.body.clientWidth <= 1000? "1000px": "auto"); 
        min-width:1000px; 
    } 
    #header { 
        width:100%; 
        height:36px; 
        background:#000 url(head_tbg.jpg) repeat-x; 
    } 
    #header li{ 
        width: 20%; 
        height: 36px; 
        line-height: 36px; 
        float: left; 
        text-align: center; 
    } 
    .slide{ 
        width: 100%; 
        height: auto; 
        overflow: hidden; 
    } 
    .slide img{ 
        max-width: 100%; 
        height: auto; 
    } 
</style>



PS:重点在于对#wrap属性的设置。

html代码:


<div id="wrap"> 
    <div id="header"> 
        <ul> 
            <li><a href="">菜单栏目</a></li> 
            <li><a href="">菜单栏目</a></li> 
            <li><a href="">菜单栏目</a></li> 
            <li><a href="">菜单栏目</a></li> 
            <li><a href="">菜单栏目</a></li> 
        </ul> 
    </div> 
    <div class="slide"> 
        <img src="ad1.jpg" alt=""> 
    </div> 
    <div class="page"></div> 
</div>


下面出现的效果就正常了,希望对您有用。


解决css背景100%平铺浏览器缩放(缩小)后显示不全(图2)

TAGS:css背景100%

猜你喜欢

NewHot手机版