1、给body加上一个min-width最小宽度，以px为单位，这样当页面变小时，当达到你所设置的最小宽度，body的宽度不再改变，超出的部分会用横向滚动条显示，其内所有元素的布局也不会受影响。

2、使用百分比设置宽度，所有会在页面变化后布局改变的元素的宽度都设置成百分比宽度，这样在缩放时，页面内的各个元素也会跟着缩放，宽度占比不变，当然前提是设置CSS样式前，先给body和html这两个元素设置宽度为100%，避免后面出错。

至于高度，建议使用确定的值，不要用百分比，因为页面的大小对高度基本没影响，让元素自己去撑盒子得高度。

原文链接:https://www.cnblogs.com/lczhuguang/p/10638534.html

HTML页面中解决内容元素随窗口变化布局变乱问题的更多相关文章

  1. 【C#】无损转换Image为Icon 【C#】组件发布：MessageTip，轻快型消息提示窗 【C#】给无窗口的进程发送消息 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体 【手记】调用Process.EnterDebugMode引发异常：并非所有引用的特权或组都分配给呼叫方 【C#】DataRowState演变备忘

    [C#]无损转换Image为Icon 如题,市面上常见的方法是: var handle = bmp.GetHicon(); //得到图标句柄 return Icon.FromHandle(handle ...

  2. Android : 如何在WebView显示的页面中查找内容

    Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...

  3. ××校招：前端线上笔试题--页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

    题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动:   原理: 1.页面上画一个圆,画一个圆心.在这个圆的圆周上面画一个点,我们就让这个点绕着圆周跑: 2.怎 ...

  4. 获取页面中任意一个元素距离body的偏移量

    //offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...

  5. 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体

    注:本文适用.net 2.0+的winform项目 目的: 点击页面中的target="_blank"链接时,弹出新窗体 页面中有window.close()操作时,关闭窗体 上述 ...

  6. 纸壳CMS（ZKEACMS）体验升级，快速创建页面，直接在页面中修改内容

    关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...

  7. Selenium WebDriver-判断页面中某一元素是否已经显示，通常用于断言

    判断界面中某一元素是否已经呈现,多用于断言,代码如下: #encoding=utf-8 import unittest import time from selenium import webdriv ...

  8. html页面中块级元素的居中

    第一:在页面中使用 margin: 0 auto;居中: <div> <p>夜屋</p> </div> div { width: 100%; posit ...

  9. js对页面中的内容进行拼音搜索，只对后台已经传过来的页面数据进行索引

    实现输入拼音(可以使用拼音首字母来查),来查询出已经存在于页面的数据 注意:这种写法只能适用于页面中已经存在的数据进行检索,大体意思是将本页内的数据拼接成一个字符串,然后通过该字符串去检索匹配的字符串 ...

随机推荐

  1. 输出文章段落首行空格缩进在IE和chrome显示不一致的问题

    一般的编辑文章时,首行都缩进两格,而执行的操作则是一个tab键或者四个空格键,在html代码中体现的往往都是4个 然而我在输出时却发现了同样的html代码,在IE上显示的是缩进了一个字符,在chrom ...

  2. eclipse+PyDev里面import win32api报错的问题解决

    windows下面eclipse+PyDev的开发环境,安装了pywin32,写import win32api时老提示错误,在idle里正常执行. 原来是安装python库时,python安装路径下面 ...

  3. html5盒子模型

    相关博客: Flex 布局教程:语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程:实例篇:http://ww ...

  4. display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）

    首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block ...

  5. Androidstudio中添加jar包的方法

    在Androidstudio中添加一个jar包进去,怎么添加? 以下纯个人使用Androidstudio过程中的经验积累,要是有不足,望提出建议. 方法一: 先点击Androidstudio中的Pro ...

  6. 收集一些Unity插件

    MCS Male 系列,人形角色插件,表情+体型 Mecanim Control Mecanim Control is a coding tool made that allow for a wide ...

  7. bzoj 2946: [Poi2000]公共串【SAM】

    对第一个串建SAM,把剩下的串在上面跑,每次跑一个串的时候在SAM的端点上记录匹配到这的最大长度,然后对这些串跑的结果取min,然后从这些节点的min中取max就是答案 注意在一个点更新后它的祖先也会 ...

  8. 基于 CODING 轻松搞定持续集成

    点击观看视频教程 带你一步一步搞定 CODING 持续集成 持续集成加速软件交付 持续集成这个概念是由 Grady Booch 在 1991 年首次提出,随后成为了 DevOps 的核心实践之一.持续 ...

  9. Django学习:ORM

    Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...

  10. Firefox下载安装fireBug提示下载出错的解决方案

    火狐官方扩展中心在国外,国内可能访问某一节点出现了问题.所以可能扩展无法安装,并且扩展更新可能出现问题,导致启动检查扩展更新过慢影响启动.我们可以通过修改系统hosts文件加速访问.修改hosts文件 ...