如何做到背景铺满屏幕,且不会出现横向滚动条

这两天做Web页面有一个需求:是不管背景图片宽高,需要铺满整个屏幕宽度,且不论屏幕大小始终不能出现横向滚动条。

少废话,上代码先。

html结构关键代码:

<body>
<div class="container">
    <div class="content">
        <div class="btn btn_left">
            <a href="#" target="_blank"><img src="dist/images/btn_startgame.png" alt="开始游戏"></a>

        </div>
        <div class="btn btn_right">
            <a href="#" target="_blank"><img src="dist/images/btn_startgame.png" alt="开始游戏"></a>
        </div>
	<!-- 顶部文案 -->
	<div class="header">
		<img src="dist/images/logo.png" alt="pptv游戏logo">
	</div>
	<div class="content_body">	
	</div>
    </div>
</div>
</body>
CSS关键代码:

body {
  font-family: "Microsoft Yahei", Arial, "Hiragino Sans GB", "Helvetica Neue", 'Source Sans Pro', sans-serif, Helvetica;
  font-size: 14px;
  background: #e8e8e8;
  overflow-x: hidden; }
.container {
  width: 100%;
  margin: 0 auto; 
background: url(../images/bg.jpg) no-repeat top center;}
.content {
  position: relative;
  margin: 0 auto;
  width: 986px; }
.btn {
  position: absolute;
  top: 44em; }
  .btn a img {
    width: 234px;
    height: 90px; }

.btn_left {
  left: -20em; }

.btn_right {
  right: -20em; }
.header {
  width: 960px;
  height: 103px;
  margin: 0 13px;
  background: url(../images/head_title.png) no-repeat center center; }
  .header img {
    display: block;
    padding-top: 30px; }


.container {
  width: 100%;
  margin: 0 auto; 
background: url(dist/images/bg.jpg) no-repeat top center;}
这是最常见的使背景铺满屏幕的方法,缺点是当内容区的高度不够时,背景图无法撑开。如果是内容区高度不固定的话,就得用相对定位和绝对定位了。

.content {
  position: relative;
  margin: 0 auto;
  width: 986px; }
这个不用多解释了,保证内容区始终居中,且宽度是固定的,在PC端最常见的做法。设置为相对定位是为了让左右两边的按钮以内容区位置为准。

.btn {
  position: absolute;
  top: 44em; }
  .btn a img {
    width: 234px;
    height: 90px; }

.btn_left {
  left: -20em; }

.btn_right {
  right: -20em; }
让左右两边的可点击按钮始终位于内容区的左右两侧。


做完这些似乎已经成功了一大半,但新的问题出现了,当在小的笔记本屏幕时,左右两边的按钮显示不全,并会出现横向滚动条。这里有一个最简单可行的办法,设置body的overflow-x属性为hidden,这样当内容区及按钮的总宽度超过屏幕宽度时,能横向隐藏多余的内容,不再出现横向滚动条。

body {
  font-family: "Microsoft Yahei", Arial, "Hiragino Sans GB", "Helvetica Neue", 'Source Sans Pro', sans-serif, Helvetica;
  font-size: 14px;
  background: #e8e8e8;
  overflow-x: hidden; }

遗憾的是在IE7以下并不支持overflow-x属性,暂时还想不到其它可行的办法,只能使出杀手锏,在html中提示在远古时代的人升级浏览器,无奈。

<!--[if lte IE 7]>
<p class="chromeframe">您正在使用一个<strong>低版本的</strong>浏览器. 请<a href="http://browsehappy.com/">更新您的浏览器</a>,来提升您的网页浏览体验。</p>
<![endif]-->





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值