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

来源：互联网发布：2017徐州外来人口数据编辑：程序博客网时间：2024/04/28 18:01

这两天做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]-->

0 0