?這里以自適應(yīng)高度為例。先要設(shè)定好div的width，不用設(shè)置div的height屬性。后面只需設(shè)置minHeight屬性或者干脆minHeight屬性也不去設(shè)置，再保證div是塊級元素或絕對/固定位置的元素，這樣div就會根據(jù)內(nèi)容自適應(yīng)高度了。除非有特殊需求否則還是建議自適應(yīng)高度需要設(shè)置minHeight和maxHeight，因?yàn)闊o限制的自適應(yīng)總會讓人擔(dān)心到時拿到的數(shù)據(jù)是否合乎規(guī)范。

minWidth 屬性設(shè)置或返回元素的最小寬度，屬性只在塊級元素或絕對/固定位置的元素發(fā)揮作用。
??????? length ?? ?使用 px、cm 等單位定義最小寬度。默認(rèn)是 0。
??????? % ?? ?定義最小寬度為父元素的百分比。
??????? inherit ?? ?minWidth 屬性的值從父元素繼承。

maxWidth 屬性設(shè)置或返回元素的最大寬度，屬性只在塊級元素或絕對/固定位置的元素發(fā)揮作用。
??????? none ?? ?默認(rèn)。元素的寬度沒有限制。
??????? length ?? ?使用 px、cm 等單位定義最大寬度。
??????? % ?? ?定義最大寬度為父元素的百分比。
??????? inherit ?? ?maxWidth 屬性的值從父元素繼承。

minHeight 屬性設(shè)置或返回元素的最小高度，屬性只在塊級元素或絕對/固定位置的元素發(fā)揮作用。

maxHeight 屬性設(shè)置或返回元素的最大高度，屬性只在塊級元素或絕對/固定位置的元素發(fā)揮作用。

簡單列表自適應(yīng)的例子
示意圖

例

// 數(shù)據(jù) var dataArr = new Array(); for (var i = 0 ; i < 100 ; i ++) {var tempDict = {"area":"第一工區(qū)","ym":"2020/12","time":"2020-12-05","title":"工作計(jì)劃"+String(i),"plan":"目標(biāo)產(chǎn)值：30萬","person":"張三"+String(i)};if (i == 1 || i == 3) {tempDict = {"area":"第一工區(qū)","ym":"2020/12","time":"2020-12-05","title":"工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作計(jì)劃工作"+String(i),"plan":"目標(biāo)產(chǎn)值：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);// 工區(qū)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);// 內(nèi)容父視圖var tempListContentView = document.createElement("div");tempListContentView.style.height = "100%";tempListContentView.style.display = "table";tempListContentView.style.listStyle = "none";tempListContentView.style.paddingTop = "10px";listDiv.appendChild(tempListContentView);// 標(biāo)題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);// 負(fù)責(zé)人var tempPerson = document.createElement("div");tempPerson.innerText = "工區(qū)負(fù)責(zé)人："+tempDict["person"];tempPerson.style.fontSize = "13px";tempPerson.style.position = "relative";tempPerson.style.left = "10px";tempListContentView.appendChild(tempPerson);// 目標(biāo)產(chǎn)值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); }

?

總結(jié)

以上是生活随笔為你收集整理的[JS]div根据其中内容自适应宽度和高度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。