浏览器窗口化窗口变小右上角右下角 div错位的问题

ＣooL．泪猪 · 发表于 2017-5-4 10:05:06

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？会员注册

x


	我最近写网页的时候，经常碰到一个普遍的问题，经过我的查阅和尝试，终于解决了这一问题，这里有两种方法提供给大家，如果博友还有更好的方法，欢迎补充。一.使用min-width属性：我们先看看下面这段代码（html）： <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">$ `& o& @! h: C1 V; u3 K! _! d! n2 b <head> u7 h: {+ M O: T <title>无标题文档</title> / Y$ I; W- N1 @9 ]2 T <meta charset="utf-8" /> 4 V6 b: U# D5 v5 N& Z3 r/ M <style type="text/css"> 5 \5 W* b8 J7 n* f' ]' } body {margin: 0px;padding:0px;}7 R9 R$ n3 B: C" u! s& J .top {width: 100%; height: 60px;background: green;} - \|. Q7 G1 q6 a+ ^ .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;} ( J# q/ c( w# A, c .nav p {width: 1000px;height: 60px; text-align: center;}/ W5 W# _& @. d' G3 _& i </style> % i! T4 E- O+ x# ~6 N: l) E </head> $ t8 B1 Y5 b# @( y- M( w <body> $ i5 s6 C, x( y5 f <div class="top"> $ `9 g8 C+ X( Q+ I <div class="nav"><p>这是导航区域</p></div> ' l, s G7 Z P% s5 \* y8 H </div>) l2 d$ K- E+ i4 H7 D0 v( i v; T </body> 5 G5 M! Q, z8 s </html> 复制代码浏览器全屏时显示如下（显示正常）：如果有人问nav区域设置高度同样为60px；为什么红色的边框超出了高度，那是因为边框设置了2px，所以总高度多了4个像素，所以超出了范围。要想要不超出，所以需要在nav区域的高度上减去4个像素。登录/注册后可看大图 c95b133f14d369bfab70ef386f39a36c.jpg (38.01 KB, 下载次数: 71) 下载附件保存到相册 2017-5-4 10:04 上传图1 浏览器窗口全屏显示 7 D* R L! z o0 o& O( f" [ 当我们把浏览器窗口变小时，我们会发现，这时候就会有问题出现了，如下图：登录/注册后可看大图 6a7750f38bfb4a3a3eec9c1f0dcc023f.jpg (110.8 KB, 下载次数: 64) 下载附件保存到相册 2017-5-4 10:04 上传图2 浏览器变小，显示错误为什么会出现这样错位的问题呢？我们来分析一下。首先要知道，top区域宽度100%，是相对于浏览器来说的。就上图而言，这里有个等式：红色边框宽度（nav） = 绿色区域（top）+空白区域。当浏览器窗口变小，而且浏览器的宽度小于nav区域的1000px时，当我们把下面的滚动条拉到最右边时，发现出了错。那我们应该怎么来修改这个错误，就用到了min-width属性，意思是最小宽度。把此属性加到top区域里面： .top {min-width: 1000px; width: 100%; height: 60px;background: green;}，其他代码不变。在运行一下，如下图所示：登录/注册后可看大图 7c07bf1978c905e59a2c18ceac7e46bf.jpg (110.47 KB, 下载次数: 68) 下载附件保存到相册 2017-5-4 10:04 上传图3 加了min-width ，浏览器变小，显示正常从上图可以看出，滚动条拉倒最右边，也出现了正确的情况。绿色填充到了nav区域。所以问题得到了解决。为什么问题会得到解决呢？答：top区域加了min-width属性，设置为1000px，意思是top区域的最小宽度为1000px，所以当浏览器窗口变小到小于1000时，top的宽度为1000px，而nav的宽度也是1000px，所以就刚好完全显示，不会出错了。 . B0 Z- d; H% H0 o9 Y 二.现在我们讲解第二种方法，用图片填充整个背景。代码如下： <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> % F6 j1 H6 ]. U M) f: O1 S: T h <head> 8 I+ v1 ]4 e) K8 D7 m <title>无标题文档</title> 4 h6 v* W+ R) y/ q# n <meta charset="utf-8" /> . z* I4 }9 c( U# h$ N; [ <style type="text/css"> " F9 z4 ~) U5 A body {margin: 0px;padding:0px;background:url(4.jpg) repeat;}/使用图片填充整个body/ . o) z; T9 z) a& F1 J6 \! l9 G .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;} 1 X. y+ }. Q% @: I& R# G# J0 B- U .nav p {width: 1000px;height: 60px; text-align: center;} 0 v' u# e3 D3 q </style> 2 X! [) r- s2 T8 X7 n( x </head> 1 N) r1 z( c2 y. ~! V. L1 f1 x <body>, k# P# y9 r7 R <div class="top">7 z* \$ N2 N0 S/ J7 r8 @ <div class="nav"><p>这是导航区域</p></div> 3 ?' h! s: z; w1 U6 }8 ^3 K7 J j </div>: i6 M0 ?: z* Z </body>9 W/ a0 Y0 n" [, {. B& O6 ? </html> 复制代码使用图片重复填充整个body之后，再添加导航区域nav居中显示，浏览器窗口变小的时候显示如下：登录/注册后可看大图 e59cf9d62da1977224148c3f4eb6bc91.jpg (104.75 KB, 下载次数: 67) 下载附件保存到相册 2017-5-4 10:04 上传图4 使用图片填充body，显示正常。从上图我们发现，滚动条拉倒右边，还是显示正常，也就是问题已经得到了解决。但是有同学可能会问，如果选择这种方法，背景不是我想要的效果怎么样？答：做项目的时候，都是给一张psd图片，你用ps从网页上面直到最下面切一张包含整个body颜色的小图，用来填充body就好了。以后创建的div再设置背景色会覆盖掉body色，所以完全没有影响。这是本人自己想到的两种方法，个人觉得第二种还比较方便。如果还有其他的方法，欢迎大家补充！ % P# W3 ^- q' \& p

ＣooL．泪猪说：

浏览器窗口化窗口变小右上角右下角 div错位的问题

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

发表回复

浏览过的版块

社区QQ达人

超级无敌新人奖

优秀成员

最佳成员奖

原创者勋章

沙发王勋章

每日签到奖

推广之星奖

宣传大使

极度诱惑勋章

视觉潮人奖

先锋奖

六星奖

音乐天才奖

空间认证奖

YY认证勋章

在线时间王勋章

红人勋章

爱心勋章

社区活动奖

幸福恋人奖(男)

酷Q帅哥奖

精英会员审核团队标志

最具人气奖

水瓶座

分享到：

个人中心