时尚酷族

标题: 浏览器窗口化窗口变小右上角右下角 div错位的问题 [打印本页]
作者: ＣooL．泪猪    时间: 2017-5-4 10:05
标题: 浏览器窗口化窗口变小右上角右下角 div错位的问题

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

一.使用min-width属性：

我们先看看下面这段代码（html）：

  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    ; J$ [& [" Y6 r4 ?' b
  2. <head> 1 i" M6 `& [$ X) ^+ F2 d+ e
  3. <title>无标题文档</title>2 Y& C+ l! ~% H+ j* z( u8 x  U
  4. <meta charset="utf-8" />  g" D- W7 L  v* j
  5. <style type="text/css">
    - X0 z6 D) z$ B9 G* J/ n7 i
  6. body {margin: 0px;padding:0px;}# j" ?$ Y; i' d  C) _$ Y- h
  7.      .top {width: 100%; height: 60px;background: green;} 7 F9 V! P) d4 x2 E5 U7 i' y1 A$ i) g
  8.      .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;} $ E( R% O. }, v7 T2 w1 C$ c
  9.      .nav p {width: 1000px;height: 60px; text-align: center;}
    / E5 |( x; V: I8 v" D* x1 _
  10.      </style>& f9 i3 V5 K. g- U7 O1 `5 s
  11.    </head>
    4 H6 n" }3 q# k) G; {. p
  12.    <body>
    : B' b; I2 |' x2 c4 g& }
  13.        <div class="top">: Q6 C6 l% K% L* g1 R% u8 K: o( Q& f9 z
  14.            <div class="nav"><p>这是导航区域</p></div>
    " K4 r& L- |% F3 t* ?7 K1 o: Q3 X: f
  15.        </div>  K1 c* M6 i( X
  16.    </body>
    ( v  n* W# L  i
  17. </html>
复制代码

浏览器全屏时显示如下（显示正常）：

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

c95b133f14d369bfab70ef386f39a36c.jpg
登录/注册后可看大图