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 url编码解码问题(下载中文名文件)

    问题描述:需要url直接访问中文名的文件,类似于在地址栏里直接输入http://localhost:8080/example/丽江旅游攻略.doc 来进行文件下载,tomcat的server.xml文 ...

  2. Tomcat黑窗口改变Title

    start cmd /K " && call startup.bat && pause && exit " 设置Title之后,再手 ...

  3. ASI框架的使用

    iOS开发网络篇—简单介绍ASI框架的使用 说明:本文主要介绍网络编程中常用框架ASI的简单使用. 一.ASI简单介绍 ASI:全称是ASIHTTPRequest,外号“HTTP终结者”,功能十分强大 ...

  4. 第十篇 .NET高级技术之委托

    委托是一种可以指向方法的数据类型,可以声明委托类型变量. 声明委托的方式:delegate返回值类型   委托类型名(参数) 比如delegate void MyDel(int n) 注意这里的除了前 ...

  5. 如何用Zookeeper来实现分布式锁?

    什么是Zookeeper临时顺序节点? 例如 : / 动物 植物 猫 仓鼠 荷花 松树 Zookeeper的数据存储结构就像一棵树,这棵树由节点组成,这种节点叫做Zonde.# Znode分为四种类型 ...

  6. Jquery | 基础 | 慕课网 | (*选择器)

    原生JS var elements1 = document.getElementsByTagName('*'); JQ var elements2 = $("*"); <!D ...

  7. Caffe实战四(Caffe可视化方法)

    面对一堆文件,一行行的数据,确实很难理解深度学习相关的概念,好比训练的数据.构建的网络是怎样的?今天按照书中第16天的内容实践了一翻,终于看到了所谓的深度神经网络的模样.(参考:<深度学习 21 ...

  8. 正睿OI提高组十连测 day1 总结

    可能是最简单的一场比赛了吧,结果却打得这么差... T1是个找规律题,结果一开始愚蠢地找错了规律,然后又对拍,到1h多一点才过掉 然后看t2和t3,以为t2是个水题,t3也只要处理一下就好了,先写t2 ...

  9. AtCoder Grand Contest 015 C - Nuske vs Phantom Thnook

    题目传送门:https://agc015.contest.atcoder.jp/tasks/agc015_c 题目大意: 现有一个\(N×M\)的矩阵\(S\),若\(S_{i,j}=1\),则该处为 ...

  10. Hdu 5458 Stability (LCA + 并查集 + 树状数组 + 缩点)

    题目链接: Hdu 5458 Stability 题目描述: 给出一个还有环和重边的图G,对图G有两种操作: 1 u v, 删除u与v之间的一天边 (保证这个边一定存在) 2 u v, 查询u到v的路 ...