前端父元素的height是auto，子元素怎么高度100%取不到高度怎么办呢

父层元素需要设置高度值，子层元素百分比高度都是相对于父层的。

也可以使用最新的vh,vw单位，相对于页面高度和宽度的百分比进行设置。

还可以使用js动态获取父层元素的高度并设置父层元素固定的高度，或者设置子层元素的百分比高度。

本文介绍由于子元素使用 float 导致父元素无法自适应子元素的高度的解决方法。

正常情况下，父元素不需要设置高度也可以自适应子元素的高度，举个例子，很简单的一个结构：

我们不给父元素设置高度：

效果如下：

父元素的高度消失了：

这是因为加了浮动以后元素会脱离标准的文档流，破坏inline-box，造成的后果就是没有高度，所以父元素无法获取子元素的高度，自然也无法自适应高度。

接下来介绍解决子元素浮动以后父元素自适应高度的方法：

如果在确定知道子元素高度的情况下，可以直接给父元素设置高度：

这样虽然父元素没有被子元素撑起来高度，但也可以把子元素包住：

但是这样虽然可以解决问题，但也不是自适应高度啊，而且如果子元素高度不一定，这种办法也不是很好，接下来介绍方法二。

在父元素的样式中设置 overflow 属性，可以是 hidden 或者是 auto ，都可以达到自适应设置了浮动的子元素高度：

父元素设置了 overflow 属性以后，不论子元素高度是多少，父元素都可以自适应高度：

既然父元素高度消失是由于浮动造成的，那么我们清楚浮动不就可以了。我们在父元素结束标签 </div> 前加入一个子元素，给它设置 class 为 clear ：

然后给该元素添加一个清除浮动的样式：

这样子就可以实现清除浮动，也可以达到父元素自适应子元素高度的效果：

浮动说简单不简单，说难也不难，还是要平时多写多积累啊。

1、问题原因：bootstrap栅格系统的div高度，由于要适配不同的设备，那么div的高度就不能固定死。

2、解决方法：直接不给div加高度，但如果一个大div里面包裹小div的话，由于div的浮动原因就可能出现div布局混乱，那么你只要在大div上加上 clearfix 去除浮动即可，同时加上内边距padding：10px 就可以了

3、代码：<div class="a clearfix" style="padding：10px"><div class="col-md-12">111111111</div><div class="col-md-12">2222222222</div></div>

var

smalls

=

documentgetElementById('small')getElementsByTagName('li');

这样可以获取所有id="small"下的

li

。

以上就是关于前端父元素的height是auto，子元素怎么高度100%取不到高度怎么办呢全部的内容，包括:前端父元素的height是auto，子元素怎么高度100%取不到高度怎么办呢、父元素由于子元素使用float而无法自适应高度、bootstrap栅格系统的div高度怎样定等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！