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. E20180404-hm

    reject vt. 拒绝; 排斥; 抛弃,扔掉; 吐出或呕吐; conditioner  n. 调节器,调节装置 fabric n. 织物; 布; 构造; (建筑物的) 结构(如墙.地面.屋顶):质 ...

  2. C++笔试题（四）

    华为从事通信网络技术与产品的研究.开发.生产与销售,是中国电信市场的主要供应商之一,并已成功进入全球电信市场.每年华为都要在各大高校招聘大批的应界生,特别是华中科技大学.公司网址是:http://ww ...

  3. “玲珑杯”线上赛 Round #17 河南专场 B：震惊，99%+的中国人都会算错的问题(容斥计算)

    传送门 题意 略 分析 是一道稍微变形的容斥题目,容斥一般的公式 \[ans=\sum_iAi-\sum_{i<j}{Ai∩Aj}+\sum_{i<j<k}{Ai∩Aj∩Ak}+.. ...

  4. POJ1050【DP】

    题意: 求一个最大子矩阵和. 思路: 枚举行区间,然后求一个最大子序列和. 贴一发挫code- #include <iostream> #include <cstdio> #i ...

  5. P5168 xtq玩魔塔

    传送门 其实就是板子--只要会克鲁斯卡尔重构树和带修莫队就可以了 这么想着的我就调了将近一个下午-- 思路其实比较清晰,然而码量很大,细节贼多-- 不难看出只在最小生成树上走最优,于是建出克鲁斯卡尔重 ...

  6. Luogu P1429 平面最近点对 【分治】By cellur925

    题目传送门 题目大意:给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的.$n$<=100000. $Algorithm$ 最朴素的$n^2$枚举肯定 ...

  7. AppStore 审核拒绝原因记录

    此文仅记录审核app被拒绝的原因 1.未提供充值功能,app中出现vip或者会员图标文字 被拒 解决,隐藏或取消该图标或文字 2.第三方登录,需要跳转到第三方app登录 被拒 解决,审核时隐藏第三方登 ...

  8. 洛谷 P4219 [BJOI2014]大融合

    查询,就相当于先删去这条边,然后查询边的两个端点所在连通块大小,乘起来得到答案,然后再把边加回去 可以用线段树分治做 #pragma GCC optimize("Ofast") # ...

  9. Baker Vai LightOJ - 1071

    题意:类似传纸条 方法: 把他要求的操作(一个人来回),转化为两个人同时走,除了开始和结束位置只能走不同路,得到的分数和的最大值即可. 一开始想到要定义的状态,是两个人的x(行)和y(列)坐标.这样时 ...

  10. eclipse XML TAB键默认为四个空格