HTML页面中解决内容元素随窗口变化布局变乱问题
1、给body加上一个min-width最小宽度，以px为单位，这样当页面变小时，当达到你所设置的最小宽度，body的宽度不再改变，超出的部分会用横向滚动条显示，其内所有元素的布局也不会受影响。
2、使用百分比设置宽度，所有会在页面变化后布局改变的元素的宽度都设置成百分比宽度，这样在缩放时，页面内的各个元素也会跟着缩放，宽度占比不变，当然前提是设置CSS样式前，先给body和html这两个元素设置宽度为100%，避免后面出错。
至于高度，建议使用确定的值，不要用百分比，因为页面的大小对高度基本没影响，让元素自己去撑盒子得高度。
原文链接:https://www.cnblogs.com/lczhuguang/p/10638534.html
HTML页面中解决内容元素随窗口变化布局变乱问题的更多相关文章
- 【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 ...
- Android : 如何在WebView显示的页面中查找内容
Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...
- ××校招：前端线上笔试题--页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动
题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动: 原理: 1.页面上画一个圆,画一个圆心.在这个圆的圆周上面画一个点,我们就让这个点绕着圆周跑: 2.怎 ...
- 获取页面中任意一个元素距离body的偏移量
//offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...
- 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体
注:本文适用.net 2.0+的winform项目 目的: 点击页面中的target="_blank"链接时,弹出新窗体 页面中有window.close()操作时,关闭窗体 上述 ...
- 纸壳CMS（ZKEACMS）体验升级，快速创建页面，直接在页面中修改内容
关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...
- Selenium WebDriver-判断页面中某一元素是否已经显示，通常用于断言
判断界面中某一元素是否已经呈现,多用于断言,代码如下: #encoding=utf-8 import unittest import time from selenium import webdriv ...
- html页面中块级元素的居中
第一:在页面中使用 margin: 0 auto;居中: <div> <p>夜屋</p> </div> div { width: 100%; posit ...
- js对页面中的内容进行拼音搜索，只对后台已经传过来的页面数据进行索引
实现输入拼音(可以使用拼音首字母来查),来查询出已经存在于页面的数据 注意:这种写法只能适用于页面中已经存在的数据进行检索,大体意思是将本页内的数据拼接成一个字符串,然后通过该字符串去检索匹配的字符串 ...
随机推荐
- poj1979【基础bfs/dfs】
挑战习题搜索-1 题意: 给定起点,然后求一个可以到达的数量,位置"."都可以走.每次应该是上下左右都可以走. 思路: 这题应该DFS更好写,但是BFS也可以写吧. 好久没写了- ...
- PTA【复数相乘】
队友在比赛时A掉的.吊吊吊!!! 主要考虑这些情况吧||| 案例: /* 3i i -3 i -1-i 1+i i 1 -1-i -1-i */ -3 -3i -2i i 2i #include &l ...
- PJzhang：贷款逾期与失信被执行人
猫宁!!! 最近看到一家网贷机构在APP上的温馨提示,提到了网贷逾期与个人征信的关系以及向客户发放贷款的7项基本原则. 如下: 贷款申请及逾期告知 尊敬的客户,感谢您选择####股份有限公司为您提供贷 ...
- 为什么使用Stylus
CSS预处理器的出现大大的提高了前端开发的效率和逼格,它让CSS可编程化.LESS和Sass/SCSS是两种最为常见的预处理器,拥有大量的用户基数,数目庞杂的第三方库.然而,还有一种预处理器并未引起足 ...
- Python while 1 和 while True 速度比较
References http://legacy.python.org/dev/peps/pep-0285/http://stackoverflow.com/questions/3815359/whi ...
- Android课程设计第二天界面排版
注意:课程设计只为完成任务,不做细节描述~ 老师叫我们做一个这个样子,然后.. <?xml version="1.0" encoding="utf-8"? ...
- Headmaster's Headache UVA - 10817
UVA-10817 ans[i][s1][s2]表示考虑前i个人时,有至少1人教的科目集合为s1,有至少2人教的科目集合为s2时的最少工资集合用一个数字表示,转换成二进制后从后面开始数第i位的状态(1 ...
- javascript简单的表单验证
<html> <head> <title>用户登录</title> <script language="javascript" ...
- Spring------自动化装配Bean（三）
上一篇是基于java手动装配bean的实现,这一篇将通过xml手动装配bean来实现. xml配置相对于java配置有点: xml配置更加快捷 但不宜扩展 一.打开application.xml 1. ...
- C++ thread operator= 右值引用 vector foreach
这是 thread 的construct定义: default (1) thread() noexcept; initialization (2) template <class Fn, cla ...