时尚酷族

标题: 浏览器窗口化窗口变小右上角右下角 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">$ `8 A4 {, }2 ?- I# W
  2. <head>
    2 P5 s( a& ~* O+ x6 S9 f# X' S& r
  3. <title>无标题文档</title>
    / t1 A3 y, u  B  D: p4 B6 x
  4. <meta charset="utf-8" />& a, P7 `0 b7 g* G
  5. <style type="text/css">
    ; u3 s1 H% e* B" Q1 K
  6. body {margin: 0px;padding:0px;}) q$ g- I6 Z# w& k
  7.      .top {width: 100%; height: 60px;background: green;} % o7 u; K) w% p' G9 K. h1 V
  8.      .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;}
    4 T" z) u/ F; t6 U
  9.      .nav p {width: 1000px;height: 60px; text-align: center;}
    1 s% W& ?: t  L& e, N. ?/ ]
  10.      </style>) P& F) a; X: d5 ]- X- j! ~7 Z
  11.    </head>! k) l' _) A' q$ M( z2 j# O5 ^/ _
  12.    <body>; I+ Y: z. T4 G) `2 t( Q
  13.        <div class="top">3 D9 a% v9 p/ j' x7 F8 [& B
  14.            <div class="nav"><p>这是导航区域</p></div>
    + x5 ^: ?3 B% \) C
  15.        </div>' k( \  k6 F2 r4 h* w9 i. {8 c
  16.    </body>
    - |0 f" b8 h( M6 z5 j6 E
  17. </html>
复制代码

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

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

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