|
|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?会员注册
x
 | |  | | 我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充。 一.使用min-width属性: 我们先看看下面这段代码(html): - <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">( E3 K- U* }) ?" x4 z$ ^6 A# ?' @
- <head>
5 H- W x S" [, W - <title>无标题文档</title>
/ K A w8 C2 N5 A1 w+ ` - <meta charset="utf-8" />. L$ M6 Z/ e$ j8 X. I6 r* Z( y* P
- <style type="text/css"> L6 R7 j- T. [6 ?9 D
- body {margin: 0px;padding:0px;}) e) h) N+ M8 F) P
- .top {width: 100%; height: 60px;background: green;} ' O w+ }( G/ b
- .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;}
9 Z1 ?' P J: U3 c$ S. m) l! Q - .nav p {width: 1000px;height: 60px; text-align: center;}
8 C# @0 {4 }5 x) H9 q - </style>
8 y5 }- M9 K9 \ - </head>5 y8 y& M, g. G0 r. k
- <body>
5 `5 b0 ]9 I6 H) t- Y" e - <div class="top">% K, a d& m `' L2 u/ f) u
- <div class="nav"><p>这是导航区域</p></div>0 M& ]1 j' ]) ?6 L/ p: K
- </div>
) h2 R$ t. z: d- f" p) j - </body>' C; X# o( o G' [" K7 W, I
- </html>
复制代码浏览器全屏时显示如下(显示正常): 如果有人问nav区域设置高度同样为60px;为什么红色的边框超出了高度,那是因为边框设置了2px,所以总高度多了4个像素,所以超出了范围。要想要不超出,所以需要在nav区域的高度上减去4个像素。
| |  |  |  | CooL.泪猪说: |
|