?這里以自適應高度為例。先要設定好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根据其中内容自适应宽度和高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。