浏览器窗口化窗口变小右上角右下角 div错位的问题 - 时尚酷族

我最近写网页的时候，经常碰到一个普遍的问题，经过我的查阅和尝试，终于解决了这一问题，这里有两种方法提供给大家，如果博友还有更好的方法，欢迎补充。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 E% S/ @5 X0 u
<head>
% k# h' z* k6 f& B% t7 ?1 H
<title>无标题文档</title>; P1 p5 Y; m5 [
<meta charset="utf-8" />
, c7 i. B+ Q, o( X7 }* S
<style type="text/css">
8 B) p3 {9 `+ r; D6 q+ [
body {margin: 0px;padding:0px;}7 e3 c- I* Z$ w2 ~+ |) B5 C2 O
.top {width: 100%; height: 60px;background: green;}
2 h$ e8 ~) P# Z- h2 Z h+ f
.nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;} 0 C6 e3 B B V. G7 F- s( q2 v( O
.nav p {width: 1000px;height: 60px; text-align: center;}; J8 X, i: m6 Q$ t6 m
</style>
% I" v# J$ h6 o% p! F$ w* g: Z
</head>
r5 L) A3 O$ `9 q8 J' o
<body>. O( M2 i7 `% P+ j
<div class="top">& t s0 H' u; [$ c* Q2 j( s
<div class="nav"><p>这是导航区域</p></div>3 x# u0 c, c3 K# h' i
</div>
# U3 r* X* v3 B
</body>6 K# c; [& N! @2 S; X$ n! p6 X0 A
</html>

复制代码

如果有人问nav区域设置高度同样为60px；为什么红色的边框超出了高度，那是因为边框设置了2px，所以总高度多了4个像素，所以超出了范围。要想要不超出，所以需要在nav区域的高度上减去4个像素。

c95b133f14d369bfab70ef386f39a36c.jpg (38.01 KB, 下载次数: 77)

下载附件保存到相册

2017-5-4 10:04 上传

图1 浏览器窗口全屏显示

当我们把浏览器窗口变小时，我们会发现，这时候就会有问题出现了，如下图：

6a7750f38bfb4a3a3eec9c1f0dcc023f.jpg (110.8 KB, 下载次数: 71)

下载附件保存到相册

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, 下载次数: 75)

下载附件保存到相册

2017-5-4 10:04 上传

图3 加了min-width ，浏览器变小，显示正常

从上图可以看出，滚动条拉倒最右边，也出现了正确的情况。绿色填充到了nav区域。所以问题得到了解决。为什么问题会得到解决呢？

答：top区域加了min-width属性，设置为1000px，意思是top区域的最小宽度为1000px，所以当浏览器窗口变小到小于1000时，top的宽度为1000px，而nav的宽度也是1000px，所以就刚好完全显示，不会出错了。

二.现在我们讲解第二种方法，用图片填充整个背景。

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> . Y3 f4 R+ A% w0 {1 Z+ M
<head>. I8 L8 k* l7 @% i5 F& x3 n
<title>无标题文档</title>
2 a: L( C2 y7 g: k& M" j
<meta charset="utf-8" /> - J# C1 \6 q) P0 @3 t9 ]2 ^
<style type="text/css"> * Q9 m3 d$ ?1 R2 p# d; q; w; R0 D
body {margin: 0px;padding:0px;background:url(4.jpg) repeat;}/*使用图片填充整个body*/
5 B& G# k& C, f( t' B
.nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;}
0 U% C. j6 X) e9 N! K
.nav p {width: 1000px;height: 60px; text-align: center;}
" k4 X2 e" U, J3 W( L% ]
</style>
& e; J: ?1 J2 ~: t4 a
</head>, x5 L3 f; M. ]8 W3 H6 p
<body>0 [4 j ?% |. X. G0 y) o; J
<div class="top">, @6 m4 O8 I t
<div class="nav"><p>这是导航区域</p></div># s! `2 X! b/ A8 A- w8 U3 i
</div>/ \, J2 S5 C! p) w- @8 i! d
</body>
: N s" |* N3 \, S2 k2 ~* t( O
</html>

复制代码

使用图片重复填充整个body之后，再添加导航区域nav居中显示，浏览器窗口变小的时候显示如下：