[JS]div根据其中内容自适应宽度和高度

这里以自适应高度为例。先要设定好div的width，不用设置div的height属性。后面只需设置minHeight属性或者干脆minHeight属性也不去设置，再保证div是块级元素或绝对/固定位置的元素，这样div就会根据内容自适应高度了。除非有特殊需求否则还是建议自适应高度需要设置minHeight和maxHeight，因为无限制的自适应总会让人担心到时拿到的数据是否合乎规范。

minWidth 属性设置或返回元素的最小宽度，属性只在块级元素或绝对/固定位置的元素发挥作用。
        length    使用 px、cm 等单位定义最小宽度。默认是 0。
        %    定义最小宽度为父元素的百分比。
        inherit    minWidth 属性的值从父元素继承。

maxWidth 属性设置或返回元素的最大宽度，属性只在块级元素或绝对/固定位置的元素发挥作用。
        none    默认。元素的宽度没有限制。
        length    使用 px、cm 等单位定义最大宽度。
        %    定义最大宽度为父元素的百分比。
        inherit    maxWidth 属性的值从父元素继承。

minHeight 属性设置或返回元素的最小高度，属性只在块级元素或绝对/固定位置的元素发挥作用。

maxHeight 属性设置或返回元素的最大高度，属性只在块级元素或绝对/固定位置的元素发挥作用。

简单列表自适应的例子
示意图

例

// 数据
var dataArr = new Array();
for (var i = 0 ; i < 100 ; i ++) {var tempDict = {"area":"第一工区","ym":"2020/12","time":"2020-12-05","title":"工作计划"+String(i),"plan":"目标产值：30万","person":"张三"+String(i)};if (i == 1 || i == 3) {tempDict = {"area":"第一工区","ym":"2020/12","time":"2020-12-05","title":"工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作计划工作工作计划工作计划工作计划工作计划工作计划工作"+String(i),"plan":"目标产值：30万","person":"张三"+String(i)};}dataArr.push(tempDict);
}// 列表
for (var i = 0 ; i < dataArr.length ; i ++) {var tempDict = dataArr[i];var listDiv = document.createElement("div");listDiv.style.backgroundColor = "white";listDiv.style.width = "100%";listDiv.style.minHeight = "70px";listDiv.style.maxHeight = "200px";listDiv.style.marginTop = "10px";listDiv.style.zIndex = "0";listDiv.style.overflow = "hidden";baseDiv.appendChild(listDiv);// 工区var tempArea = document.createElement("div");tempArea.style.width = "64px";tempArea.style.height = "64px";tempArea.style.border = "1px solid red";tempArea.style.borderRadius = "32px";tempArea.style.marginLeft = "10px";tempArea.style.marginTop = "10px";tempArea.style.float = "left";listDiv.appendChild(tempArea);var tempAreaName = document.createElement("p");tempAreaName.innerText = tempDict["area"];tempAreaName.style.display = "inline";tempAreaName.style.fontSize = "13px";tempAreaName.style.fontWeight = "bold";tempAreaName.style.position = "relative";tempAreaName.style.top = "8px";tempAreaName.style.left = "5px";tempArea.appendChild(tempAreaName);var tempAreaTime = document.createElement("p");tempAreaTime.innerText = tempDict["ym"];tempAreaTime.style.display = "inline";tempAreaTime.style.fontSize = "13px";tempAreaTime.style.color = "gray";tempAreaTime.style.position = "relative";tempAreaTime.style.bottom = "-5px";tempAreaTime.style.left = "5px";tempArea.appendChild(tempAreaTime);// 内容父视图var tempListContentView = document.createElement("div");tempListContentView.style.height = "100%";tempListContentView.style.display = "table";tempListContentView.style.listStyle = "none";tempListContentView.style.paddingTop = "10px";listDiv.appendChild(tempListContentView);// 标题var tempContentTitle = document.createElement("div");tempContentTitle.innerText = tempDict["title"];tempContentTitle.style.fontSize = "15px";tempContentTitle.style.display = "list-item";tempContentTitle.style.position = "relative";tempContentTitle.style.left = "10px";if (i == 1) {tempContentTitle.style.height = "20px";tempContentTitle.style.overflow = "hidden";}tempListContentView.appendChild(tempContentTitle);// 负责人var tempPerson = document.createElement("div");tempPerson.innerText = "工区负责人："+tempDict["person"];tempPerson.style.fontSize = "13px";tempPerson.style.position = "relative";tempPerson.style.left = "10px";tempListContentView.appendChild(tempPerson);// 目标产值var tempMBValue = document.createElement("div");tempMBValue.innerText = tempDict["plan"];tempMBValue.style.fontSize = "13px";tempMBValue.style.position = "relative";tempMBValue.style.left = "10px";tempListContentView.appendChild(tempMBValue);// 时间var tempTimeLab = document.createElement("div");tempTimeLab.innerText = tempDict["time"];tempTimeLab.style.fontSize = "13px";tempTimeLab.style.position = "relative";tempTimeLab.style.left = "10px";tempTimeLab.style.height = "30px";tempListContentView.appendChild(tempTimeLab);// 清除浮动// var cleanFloat = document.createElement("div");// cleanFloat.style.clear = "both";// cleanFloat.style.height = "0px";// cleanFloat.style.lineHeight = "0px";// cleanFloat.style.fontSize = "1px";// listDiv.appendChild(cleanFloat);
}

[JS]div根据其中内容自适应宽度和高度相关推荐

div布局根据内容自适应宽度
在style里加上如下代码: display:inline-block; *display:inline; *zoom:1;
div p 等标签的宽度和高度问题
div p 等标签的宽度和高度问题 (2013-01-13 01:31:23) 转载▼ 标签: 杂谈分类: viewTech 想用一个div 把整个页面填充,代码会怎么写??? 标题 Hello 测 ...
uniapp图片自适应_uni-app下input组件基于内容自适应宽度的实现
1.需求设计图是'单价'编辑项是input,随输入内容自己改变,前后有而fix(如果单位'￥/片'放后面那就好做多了):但是uni-app的input组件是有自定宽度的,而且试了好多css都很难控制 ...
textarea标签自适应宽度和高度
textarea当做输入框可以解析空格和回车,当我们使用textarea展示内容的时候我们希望textarea的宽高可以根据内容自适应而不是定死的像素. 下面是代码: var arr = $(this ...
js获取浏览器和设备相关宽度和高度
首先呢,我们将iPhone手机的相关数据表示如下我们要理解很多东西,比如逻辑分辨率.物理分辨率.缩放因子.ppi等,这里先不讨论. 首先呢,我们先介绍下各个屏幕宽度: 网页可见区域宽: docume ...
textarea 自适应宽度和高度
场景分析解决场景经常与遇到处理文字域的问题, 需要继承父级的宽度分析 textarea的宽度不是img那种有单独的width height属性:它是需要单独设置样式的解决样式设置 .te ...
JS,Jquery获取各种屏幕的宽度和高度
Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document ...
php 获取屏幕的宽度,JS,Jquery获取各种屏幕的宽度和高度
Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document ...
js获取浏览器当前屏幕的宽度和高度
1.获取HTML元素 document.documentElement 2.获取body元素 document.body 3.兼容所有浏览器获取当前屏幕的宽度. var winWidth = docu ...

[JS]div根据其中内容自适应宽度和高度

[JS]div根据其中内容自适应宽度和高度相关推荐

最新文章

热门文章