[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":"/12","time":"-12-05","title":"工作计划"+String(i),"plan":"目标产值：30万","person":"张三"+String(i)};if (i == 1 || i == 3) {tempDict = {"area":"第一工区","ym":"/12","time":"-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);}