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对页面中的内容进行拼音搜索，只对后台已经传过来的页面数据进行索引
实现输入拼音(可以使用拼音首字母来查),来查询出已经存在于页面的数据 注意:这种写法只能适用于页面中已经存在的数据进行检索,大体意思是将本页内的数据拼接成一个字符串,然后通过该字符串去检索匹配的字符串 ...
随机推荐
- 任务28：RequestDelegate管道实现思路
任务28:RequestDelegate管道实现思路 管道的实现机制 RequestDelegate是管道的核心.ApplicationBuilder就是接收了很多个RequestDelegae把它拼 ...
- Codeforces - 1114B - Yet Another Array Partitioning Task - 构造 - 排序
https://codeforces.com/contest/1114/problem/B 一开始叫我做,我是不会做的,我没发现这个性质. 其实应该很好想才对,至少要选m个元素,其中m个作为最大值,从 ...
- 模板 - 动态规划 - 概率期望dp
https://blog.csdn.net/myjs999/article/details/81022546
- Luogu P1850换教室【期望dp】By cellur925
题目传送门 首先这个题我们一看它就是和概率期望有关,而大多数时候在OI中遇到他们时,都是与dp相关的. \(Vergil\)学长表示,作为\(NOIp2016\)的当事人,他们考前奶联赛一定不会考概率 ...
- C++ 的浅拷贝和深拷贝（结构体）
关于浅拷贝和深拷贝这个问题遇上的次数不多,这次遇上整理一下,先说这样一个问题,关于浅拷贝的问题,先从最简单的说起. 假设存在一个结构体: struct Student { string name; i ...
- python之url编码
import urllib.parsempp='besttest 自动化测试'print(urllib.parse.quote_plus(mpp)) #url编码print(urllib.parse. ...
- Mike and gcd problem CodeForces - 798C
题目 (智商题 or 糟心的贪心) 题意: 有一个数列a1,a2,...,an,每次操作可以将相邻的两个数x,y变为x-y,x+y,求最少的操作数使得gcd(a1,a2,...,an)>1.gc ...
- P3742 umi的函数
题目背景 umi 找到了一个神秘的函数 f. 题目描述 这个函数接受两个字符串 s1,s2.这些字符串只能由小写字母组成,并且具有相同的长度.这个函数的输出是另一个长度与 s1,s2 相同的字符串 g ...
- 获取一段HTML文本中的第一张图片与截取内容摘要
有时候我们获得到的数据是一段HTML文本,也许这段文本里面有许多图片,需要截取一张作为标题图片,这时就可以用到下面这个方法获取到第一张图片: #region 获取第一张图片 /// <summa ...
- ASP.NET相关事件及JS的执行顺序
实验代码: ASPX: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="We ...