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

一.使用min-width属性：

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

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   <head>

     <title>无标题文档</title>

     <meta charset="utf-8" />

     <style type="text/css">

     body {margin: 0px;padding:0px;}

     .top {width: 100%; height: 60px;background: green;}

     .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;}

     .nav p {width: 1000px;height: 60px; text-align: center;}

     </style>

   </head>

   <body>

       <div class="top">

           <div class="nav"><p>这是导航区域</p></div>

       </div>

   </body>

 </html>

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

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

图1   浏览器窗口全屏显示

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

图2 浏览器变小，显示错误

为什么会出现这样错位的问题呢？我们来分析一下。首先要知道，top区域宽度100%，是相对于浏览器来说的。就上图而言，这里有个等式：红色边框宽度（nav） = 绿色区域（top）+空白区域。当浏览器窗口变小，而且浏览器的宽度小于nav区域的1000px时，当我们把下面的滚动条拉到最右边时，发现出了错。那我们应该怎么来修改这个错误，就用到了min-width属性，意思是最小宽度。

把此属性加到top区域里面： .top {min-width: 1000px; width: 100%; height: 60px;background: green;}，其他代码不变。在运行一下，如下图所示：

图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">

   <head>

     <title>无标题文档</title>

     <meta charset="utf-8" />

     <style type="text/css">

     body {margin: 0px;padding:0px;background:url(4.jpg) repeat;}/*使用图片填充整个body*/

     .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;}

     .nav p {width: 1000px;height: 60px; text-align: center;}

     </style>

   </head>

   <body>

       <div class="top">

           <div class="nav"><p>这是导航区域</p></div>

       </div>

   </body>

 </html>

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

图4 使用图片填充body，显示正常。

从上图我们发现，滚动条拉倒右边，还是显示正常，也就是问题已经得到了解决。

但是有同学可能会问，如果选择这种方法，背景不是我想要的效果怎么样？

答：做项目的时候，都是给一张psd图片，你用ps从网页上面直到最下面切一张包含整个body颜色的小图，用来填充body就好了。以后创建的div再设置背景色会覆盖掉body色，所以完全没有影响。

这是本人自己想到的两种方法，个人觉得第二种还比较方便。如果还有其他的方法，欢迎大家补充！

css通用小笔记03——浏览器窗口变小 div错位的问题的更多相关文章

  1. 解决FileExplorer窗口变小问题

    3.解决FileExplorer窗口变小问题 须在$HOME/.vimrc中添加: "解决FileExplorer窗口变小问题 let g:bufExplorerMaxHeight=30 l ...

  2. 兼容浏览器 div固定浏览器窗口底部 浮动div

    css内容: <style type="text/css"> #ken_BB { padding-right:30px; text-align: center; col ...

  3. SpannableString 转换局部字体大小，但在EditText测量之前设置内容，测量高度为，字体变小之前的高度

    public void setHint(@NonNull String hint, @Nullable CharSequence subHint) { this.hint = hint; if (su ...

  4. 用css实现一个空心圆，并始终放置在浏览器窗口左下角

    用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;   ...

  5. 用css 添加手状样式,鼠标移上去变小手,变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...

  6. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  7. 用css 添加手状样式,鼠标移上去变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...

  8. js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...

  9. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

随机推荐

  1. 这10道javascript笔试题你都会么

    1.考察this var length = 10; function fn() { console.log(this.length); } var obj = {   length: 5, metho ...

  2. Activity的四种launchMode《转》

    转自:http://blog.csdn.net/liuhe688/article/details/6754323/ Activity的四种launchMode. launchMode在多个Activi ...

  3. Solr：文本分析

    文本分析时搜索引擎的核心工作之一,对文本包含许多处理步骤,比如:分词.大写转小写.词干化.同义词转化等.简单的说,文本分析就说将一个文本字段的值转为一个一个的token,然后被保存到Lucene的索引 ...

  4. 重构：用Command替换条件调度程序

    注:该随笔受启发于 <重构与模式>  第七章 第7.6小节 用Command替换条件调度程序 . 对于Command不做过多解释,这里我找了两个例子.供部分园友参阅:Command例子1  ...

  5. easyui的window插件再次封装

    easyui的window插件再次封装 说明:该插件弹出的弹出框在最顶层的页面中,而不是在当前页面所在的iframe中,它的可拖动范围是整个浏览器窗口:所以不能用JS的parent对象获取弹出它的父页 ...

  6. 【FTP】C# System.Net.FtpClient库连接ftp服务器(下载文件)

    如果自己单枪匹马写一个连接ftp服务器代码那是相当恐怖的(socket通信),有一个评价较高的dll库可以供我们使用. 那就是System.Net.FtpClient,链接地址:https://net ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度

    在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...

  8. 基于MVC4+EasyUI的Web开发框架经验总结（8）--实现Office文档的预览

    在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...

  9. VS10x CodeMap 注册码 key VS插件CodeMap

    VS10x CodeMap 注册码(key): #$aCN/L/ra73OaqCJENXc2JIDL61IMawNWBBX+PxhBzobE9w3QlcrwoXeB3DWBC2f56y9r0Hx2XP ...

  10. c#中高效的excel导入sqlserver的方法

    将oledb读取的excel数据快速插入的sqlserver中,很多人通过循环来拼接sql,这样做不但容易出错而且效率低下,最好的办法是使用bcp,也就是System.Data.SqlClient.S ...