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. 自己设计的java web消息提示机制

    最近在做个类CMS的一个系统,前端展示都OK了,在做后台管理,就是对数据库的增删改查.使用SSH实现功能倒也蛮简单的,只是为了人性化的设计,需要做一些提示机制,比如用户删除了一条数据给个删除成功的提示 ...

  2. python学习笔记4-时间函数

    1 time #时间与日期 import time; # This is required to include time module. ticks = time.time() print (&qu ...

  3. UVa 1642 Magical GCD (暴力+数论)

    题意:给出一个长度在 100 000 以内的正整数序列,大小不超过 10^ 12.求一个连续子序列,使得在所有的连续子序列中, 它们的GCD值乘以它们的长度最大. 析:暴力枚举右端点,然后在枚举左端点 ...

  4. CodeForces 712A Memory and Crow (水题)

    题意:有一个序列,然后对每一个进行ai = bi - bi + 1 + bi + 2 - bi + 3.... 的操作,最后得到了a 序列,给定 a 序列,求原序列. 析:很容易看出来,bi = ai ...

  5. （水题）洛谷 - P1093 - 奖学金

    https://www.luogu.org/problemnew/show/P1093 #include<bits/stdc++.h> using namespace std; #defi ...

  6. 关于国债的一些计算： 理论TF价格2(缴款日前有付息)

    计算 ExpectedTFPrice 是一个比较复杂的计算,我们这里讨论复杂的一种情况. 给定一只可交割国债bond(一般为CTD),一个国债期货tf, 在t日(表示tf的一个交易日期,我们通过bon ...

  7. python 标准库大全

    python 标准库 文本 string:通用字符串操作 re:正则表达式操作 difflib:差异计算工具 textwrap:文本填充 unicodedata:Unicode字符数据库 string ...

  8. ExtWebComponents

    我们很高兴地宣布Sencha ExtWebComponents的早期版本现已推出.ExtWebComponents提供了数百个预构建的UI组件,您可以轻松地将它们集成到使用任何框架构建的Web应用程序 ...

  9. httpclient 3.1跳过https请求SSL的验证

    一.因为在使用https发送请求的时候会涉及,验证方式.但是这种方式在使用的时候很不方便.特别是在请求外部接口的时候,所以这我写了一个跳过验证的方式.(供参考) 二.加入包,这里用的是commons- ...

  10. Varnish快速安装及测试

    实验环境: slave-147:   192.168.75.147 slave-148:    192.168.75.148 两台机器均已关闭selinux,关闭iptables. varnish部署 ...