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

一.使用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. Ubuntu实用小指令

    1.Ubuntu命令行下打开图形界面的文件夹 可以使用 nautilus path 为使用方便,可以给命令nautilus加一个别名cd /home/usernamevi .bash_aliases在 ...

  2. Bash:-:-获取未来40天的日期

    <---获取40天日期数组---> ..};do echo "$(date --date=''${i}' days ago' "+%Y%m%d")" ...

  3. ejabberd服务端开发笔记

    网上一搜一大陀ejabberd安装配置的,扩展开发的资料少之又少,写个笔记记录一下. xmpp protocal: http://xmpp.org/xmpp-protocols/xmpp-extens ...

  4. CSS3实现的player播放按钮

    完成的效果如下 查看效果并下载 Step 1:先了解border的原理: Step 2:HTML代码结构 <section class="playContainer"> ...

  5. 使用AlertDialog创建对话框的大致步骤

    1.创建AlertDialog.Builder对象,该对象是AlertDialog的创建器.2.调用AlertDialog.Builder的方法为对话框设置图标.标题.内容等.3.调用AlertDia ...

  6. hdu 4454 Stealing a Cake (三分)

    Stealing a Cake Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  7. springboot 开发入门,及问题汇总

    1 . springboot简单介绍(http://projects.spring.io/spring-boot/) 现在的web项目几乎都会用到spring框架,而要使用spring难免需要配置大量 ...

  8. Tornado 判断用户登录状态和操作权限(装饰器)

    判断是否登录: def authenticated(method): '''''' @functools.wraps(method) def wrapper(self, *args, **kwargs ...

  9. iOS_核心动画(二)

    目 录: 一.Core Animation开发步骤 二.Core Animation的继承结构 三.CAAnimation常用的属性 四.CAPropertyAnimation(属性动画) 五.CAB ...

  10. bzoj 2927: [Poi1999]多边形之战【博弈论】

    先手必胜状态是黑三角在边上 然后其他情况脑补一下,n为偶数先手必胜,可以理解为从某一边取,先手总有办法让后手取得一边有奇数个 #include<iostream> #include< ...