用纯CSS让子DIV自适应父DIV的高度

最新推荐文章于 2023-08-28 17:22:56 发布
最新推荐文章于 2023-08-28 17:22:56 发布
阅读量8.8k 收藏 3
点赞数 1
分类专栏： 前端学习 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43059062/article/details/107956608
版权
本文介绍了如何在前端开发中，当栅格布局中子元素高度变化时，利用CSS让其他子元素高度自适应填充父元素。通过示例代码展示了未调整时的问题及调整后的解决方案，采用内外div设置高度无限并配合溢出隐藏的方法，成功实现所需效果。
摘要由CSDN通过智能技术生成

我们在前端布局时经常使用栅格布局，而当栅格布局中的某个子元素高度发生变化，外层的父元素高度也会发生变化，如果此时想让其他子元素的高度依旧填充父元素，我们应该怎么做。

这是HTML部分代码，此时左侧的高度比右侧的高。

  <div class="out">
    　　<div class="a">
      <p>左侧的内容</p>
      <p>左侧的内容<
最低0.47元/天 解锁文章
reloadedzzz
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
父级自适应，子级跟随父级高度
u011546682的博客
06-21 1992
发现一个神奇的现象。
子元素div高度不确定时父div高度如何自适应
01-19
在最外层div加以下样式 height:100%; overflow:hidden; 其它方法： Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题　 1增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 复制代码代码如下: <div id=”m
css 子div自适应父div高度
qq_35876316的博客
07-09 3303
<div class="out"> 　　<div class="a"></div> 　　<div class="b"></div> 　　<div class="c">当父DIV高度变化随里面DIV高度不同而变化的时候，子DIV仍然能充满高度。</div> </div> .out{　 　　border:1px solid #c0c0c0; 　　overflow:hidden; } .out div{ 　　
Css 子元素div自适应父元素
最新发布
qq_42753091的博客
08-28 429
子元素自适应父元素内容层 子元素自适应父元素宽高
父Div的高度随子DIV的高度自适应
yushuir的专栏
11-24 316
1、如果父DIV和子DIV都没有定义高度，而且没有使用浮动，即float，那嘛不会出现问题。 2、当你在子DIV里使用float之后，你会发现父DIV不再随子DIV的高度自适应。 这时我们需要做的就是：在使用float的DIV之后再加一个空的DIV，然后在这个DIV上清除float。 &lt;styletypestyletype="text/css"&gt;      #aa{border...
CSS 实现div宽度根据内容自适应
09-24
本文将详细介绍如何使用CSS来实现div宽度根据内容自适应。 首先，我们需要理解默认情况下，div元素作为块级元素，它的宽度会占据父元素的整个宽度，除非显式设置了宽度值。因此，如果希望div宽度自适应内容，我们...
纯Css实现Div高度根据自适应宽度（百分比）调整
11-20
然而，用的最多的标签一哥Div却不能做到自动调整（要么从父级继承，要么自行指定px，要么给百分比！但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例=-=...
怎样让一个div高度自适应浏览器高度
09-22
因此，如果父元素没有设定具体的高度，那么子元素的高度无法计算，导致`div`高度无法自适应。这就是为什么有时即使设置了`div`高度为`100%`，仍然看不到预期的效果。 解决这个问题的一种方法，正如描述中提到的，是...
研究了一下div+css的高度自适应问题
10-30
要实现 div 元素的高度自适应，需要使用 CSS 中的百分比高度和绝对定位技术。我们可以使用 `height: 100%` 属性来使 div 元素的高度自适应，然后使用 `position: absolute` 属性来实现绝对定位。 实现方法 首先，...
子div含float，父div高度自适应的div+css布局写法
01-19
div+css高度自适应网页布局，子div含float，父div高度自适应，已经通过测试的浏览器：ie6、ie7、ie8、火狐、Chrome。 代码来源： http://www.positioniseverything.net/articles/onetruelayout/equalheight
DIV设置float后父容器无法定位高度的问题解决方法
12-13
就是在父容器的添加一个子容器，该子容器位于父容器中子容器列表的最后。并且给该子容器添加一个样式：clear:both;。就这么简单，你就可以让你的父容器自适应浮动子容器的高度了。
Div父容器不根据内容自适应高度的解决
05-07
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。
css如何让子元素行高于父元素一致的方法：
weixin_42229373的博客
09-24 1405
非，常，简，单 前提： 父子元素都设置了定位，比如： 父元素： style="position:relative " 子元素： style="position: absolute;" 只要设置子元素的top和bottom值为0就可以了。 成品： <div style="position:relative "> <div style="position: absolute;top: 0px;bottom: 0px;"></div...
div css高度自适应
精彩人生
09-29 338
css3 子节点等宽样式,css 设置div基于父元素宽度的宽高相等的样式
weixin_39759890的博客
08-03 1276
1. 前言在移动开发中，有时候需要设置一个宽高相等的div，并且为了使它能够适配更多的屏幕，于是需要让它的宽高和屏幕宽高成一定的比例。这里将提供一个css的解决方案，让一些后端开发不用再写繁琐的js。2. 实现代码html:testcss:.wrapper{position:relative;height:0;padding-top:80%;}.box{position:absolute;widt...
css 父元素高度自适应，子元素高度跟随父元素自适应，怎么写
weixin_35749796的博客
01-02 2921
可以使用以下代码实现: .parent { height: auto; /* 让父元素高度自适应 */ } .child { height: 100%; /* 让子元素高度跟随父元素自适应 */ } 在这里，.parent 是父元素的类名，.child 是子元素的类名。你需要确保在 HTML 中给父元素和子元素都加上了这些类名。 注意，如果父元素的高度是固定的，那么子元素的高度也会跟随...
如何让div中的子类div的高度和父类高度一样
热门推荐
gaoweipeng238的博客
09-12 2万+
在默认情况下（没有设置浮动或定位时），子级div元素本身宽度就是占满父级宽度的100%的。 如果还希望让子级div的高度占满父级，那么为子级div增加“height: 100%”的样式即可 注意:（前提是你的父级div存在固定高度）   &lt;row style="height: 300px"&gt; &lt;i-col span="10" style="display: fl...
父div随着子div大小改变而改变，div的自适应
yosong的博客
01-04 9386
父div随着子div的大小变化而改变 重要代码 min-height overflow 代码讲解 min-height：设置div最小高度； overflow：设置div大小自适应； 全部代码 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ margin: 0 a
css 如何让div自适应屏幕水平垂直居中
05-23
可以使用以下 CSS 属性和值来让 div 自适应屏幕并水平垂直居中： ```css div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这里使用了 `position: absolute` 将 div ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值