div自适应高度解析

发布时间：2023-05-17

一、自适应高度

自适应高度是指 div 高度根据内容自动调整，当内容超出 div 的高度时，高度会自动增加，内容不足时则会自动减小。 实现 div 自适应高度的方法有多种，以下是其中两种比较常用的方法：

  1. 使用 clear:both 清除浮动，使得父容器可以包裹浮动元素。然后使用 padding-bottom 撑开高度，最后使用负 margin 消除 padding-bottom 的影响。
.parent {
  overflow: hidden;
  zoom: 1;
}
.child {
  float: left;
}
.clearfloat {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
}
.parent:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
  1. 使用 display: table 将 div 变成表格布局，然后使用 display:table-row 让其中一个 div 占据一整行，使得整个表格布局的高度随之变化。
.parent {
  display: table;
  width: 100%;
}
.child {
  display: table-row;
}

二、div 宽度减固定值自适应

有时候我们需要让 div 的宽度随着浏览器的宽度自适应，但是需要减去一定的固定值，可以使用 CSS3 的 calc() 函数。 例如，以下代码让 div 的宽度自适应，但是减去了 100px 的固定值：

.mydiv {
  width: calc(100% - 100px);
}

三、div 的高度怎么自适应

除了以上提到的方法外，还有以下几种方法可以实现 div 的高度自适应：

  1. 使用绝对定位，将底部锁死在父容器底部，顶部不设定高度。
.parent {
  position: relative;
}
.child {
  position: absolute;
  bottom: 0;
}
  1. 使用 flex 布局，将父容器设置为 display:flex，然后设置 flex:1 使得子元素占据可用空间。
.parent {
  display: flex;
}
.child {
  flex: 1;
}
  1. 使用 JavaScript 获取 div 高度，然后手动设置高度。
var divHeight = document.getElementById("mydiv").offsetHeight;
document.getElementById("mydiv").style.height = divHeight + "px";

四、div 设置高度自适应

如果我们需要设置 div 的高度自适应，并且不希望使用 JavaScript，可以使用以下方法：

  1. 使用 vh 单位设置高度，1vh 等于视口高度的 1%。
.mydiv {
  height: 100vh;
}
  1. 使用 min-height 和 max-height 同时设置为 100% 实现自适应高度。
.mydiv {
  min-height: 100%;
  max-height: 100%;
}

五、div 高度根据内容自适应

除了以上提到的自适应高度方法，也可以使用以下方法实现 div 高度根据内容自适应：

  1. 使用 line-height 与 font-size 相同的值，使得文本的行高与字体大小相同，从而让 div 高度随之适应。
.mydiv {
  font-size: 16px;
  line-height: 16px;
}
  1. 使用尺寸为 0 的伪元素设置 padding-top 和 padding-bottom。
.mydiv:before,
.mydiv:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  visibility: hidden;
}
.mydiv:before {
  padding-top: 100%;
}
.mydiv:after {
  padding-bottom: 100%;
}

六、HTML 高度自适应的代码

除了以上提到的方法外，也可以使用以下代码使得 HTML 元素高度自适应：

html {
  height: 100%;
}

七、HTML 高度自适应

如果我们想让 HTML 元素的高度自适应，可以使用以下方法：

  1. 使用 min-height 和 max-height 同时设置为 100% 实现自适应高度。
html {
  min-height: 100%;
  max-height: 100%;
}
  1. 使用 vh 单位设置高度，1vh 等于视口高度的 1%。
html {
  height: 100vh;
}

八、CSS 高度自适应怎么实现

除了以上提到的方法外，CSS 也有一些属性可以实现高度自适应：

  1. 使用 height:auto。
.mydiv {
  height: auto;
}
  1. 使用 min-height 和 max-height 实现自适应高度。
.mydiv {
  min-height: 50px;
  max-height: 100px;
}
  1. 使用 display:table-cell 使得元素表现为表格单元格，height 属性可以自适应单元格高度。
.mydiv {
  display: table-cell;
}

九、div 盒子高度自适应

除了以上提到的方法外，还有以下方法可以实现 div 盒子高度自适应：

  1. 使用 display: inline-block、vertical-align: middle 以及一个 span 元素，并设置 span 元素的高度等于 line-height，使得 div 与 span 元素一样高。
.mydiv {
  display: inline-block;
  vertical-align: middle;
}
.mydiv span {
  display: inline-block;
  height: 50px;
  line-height: 50px;
}
  1. 使用 clearfix 技巧清除浮动后，使用 padding-top 实现等高效果。
.parent:after {
  content: "";
  display: block;
  clear: both;
}
.child {
  float: left;
  width: 50%;
  padding-top: 50%;
  position: relative;
}
.child .content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
推荐文章