div自适应高度解析

一、自适应高度

自适应高度是指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;
}

2. 使用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;
}

2. 使用flex布局，将父容器设置为display:flex，然后设置flex:1使得子元素占据可用空间。

.parent {
  display: flex;
}

.child {
  flex: 1;
}

3. 使用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;
}

2. 使用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;
}

2. 使用尺寸为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%;
}

2. 使用vh单位设置高度，1vh等于视口高度的1%。

html {
  height: 100vh;
}

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

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

1. 使用height:auto。

.mydiv {
  height: auto;
}

2. 使用min-height和max-height实现自适应高度。

.mydiv {
  min-height: 50px;
  max-height: 100px;
}

3. 使用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;
}

2. 使用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;
}

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/201130.html