css控制父元素下的子元素自适应高度，且高度一致

最新推荐文章于 2022-04-07 11:46:02 发布
最新推荐文章于 2022-04-07 11:46:02 发布
阅读量463 收藏
点赞数
原文链接：http://www.cnblogs.com/happyLee/p/5086566.html
版权

css代码：

.wrap{width:600px;margin:0 auto; overflow:hidden;}

.left{background:#ccc;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;}

.right{background:#eee;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;}

html 代码：<div class="wrap"><div class="left">左侧</div>< div class="right">右侧<br />右侧<br />右侧<br />右侧< /div></div>

说明：通过控制margin-bottom:-10000px;padding-bottom:10000px;这个样式，达到左右高度一致，实际上两边的高度在10000px范围内都可以保持一致，可以设置更高。

转载于:https://www.cnblogs.com/happyLee/p/5086566.html

weixin_30764771
关注
用纯CSS让子DIV自适应父DIV的高度
qq_43059062的博客
08-12 8903
我们在前端布局时经常使用栅格布局，而当栅格布局中的某个子元素高度发生变化，外层的父元素高度也会发生变化，如果此时想让其他子元素的高度依旧填充父元素，我们应该怎么做。 这是HTML部分代码，此时左侧的高度比右侧的高。 <div class="out"> 　　<div class="a"> <p>左侧的内容</p> <p>左侧的内容</p> <p>左侧的内容</p>
【CSS黑魔法】父元素无高度情况下的子元素高度自适应方法
bug_zero的博客
01-10 1万+
声明：一切从简，重点在方法不在命名（懒。。。），实际开发中千万一定不要这么干~~~~~~此方法IE6以上（不包括IE6）浏览器均可行，此方法或许并不是那么好更不是唯一方法，有其他想法可在评论区留下你的方法，一起研究黑魔法一起嗨皮，如有雷同，纯属那啥。。。。。感谢~~~~~~~~~ 正题： 问题重现： 在开发中可能会遇到这样一个问题（如图所示）：   当一个没有设置高度的父级
A子元素撐高了父元素，同級的B子元素如果要和父級元素高度一致，用display:table
u011511086的专栏
01-18 663
A子元素撐高了父元素，同級的B子元素如果要和父級元素高度一致，父級容器用display:table；子級元素用display:table-cell;處理 &lt;style type="text/css"&gt; body { background-color: #ffffff; padding: 20px; } .item01 { display: inline-...
CSS让内部容器高度随着父容器高度变化的解决办法
cjsyr_cjsyr的专栏
11-07 1万+
使用position绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化效果，我们在重构页面时间经常会碰到使用一个外部大容器里面放置两个左右浮动容器的布局，有时候为了视觉效果，我们需要让里面两个子容器的高度必须保持一致，但是在无法确定的容器具体高度的情况下（因为DIV容器经常需要根据里面内容的多少来自定义高度），那么我们唯一的办法就是让里面的容器高度跟随外部父容器高度变化而变化，但是
子元素超出了父元素的高度_快速学会如何使用CSS组合选择器实现元素的精确选择
weixin_39530647的博客
11-29 434
关系组合选择器说明与实例分析在上文中，主要介绍了基本选择器如类选择器、属性选择器，可以使用这些选择器找到需要设置样式的元素。本文主要介绍CSS关系组合选择器。通过元素间关系确定选择哪个元素进行CSS样式的设置。组合选择器组合选择器主要通过元素与元素之间关系描述，确定需要修改或者需要设置的元素，并对其进行样式的设置。常用组合选择器主要包括后代组合器、子代组合器、一般兄弟组合器、紧邻兄弟组合器、列组合...
关于父元素无固定高度时，如何让子元素与父元素同高
weixin_45630345的博客
03-08 1805
给父元素添加绝对定位position：relative； 子元素添加相对定位position：absolute； 后给子元素设置高度height：100%；
子元素div高度不确定时父div高度如何自适应
09-25
由于CSS的盒模型和HTML结构的特性，父元素div默认情况下并不会根据子元素div的浮动来改变自身的高度，这导致了父元素无法自适应子元素的高度。为了解决这一问题，可以通过以下几种方法来实现父div的高度自适应。 第...
css控制元素高度实现自底向上和自顶向下的方法
09-24
总结来说，自底向上的高度控制常会导致元素高度因子元素内容的变化而变化，而自顶向下的方法则可以确保元素高度根据父元素自上而下传递，提供更稳定的布局。通过灵活运用这些方法和技巧，开发者能够更好地控制Web...
css 父元素高度自适应，子元素高度跟随父元素自适应，怎么写
最新发布
08-15
要实现父元素高度自适应，子元素高度跟随父元素自适应，可以使用CSS的flex布局。 首先，为父元素添加以下样式： ```css .parent { display: flex; flex-direction: column; } ``` 上述代码将父元素设置为flex...
css等高布局常用几种方式
infotw的博客
06-06 360
等高布局的方式 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相等 先来看看伪等高实现方式 通过负margin和Padding实现 真等高实现方式 •table •absoult •flex •grid •js 伪等高之-负margin和padding 主要利用负margin...
一个元素跟随兄弟元素高度自适应
zhuojiankang的博客
08-19 2989
不使用flex布局，使用table布局让左右两侧div元素高度一致。 .dealer_card{ width: 100%; display: table; .table{ display: table-row; width: 100%; .left{ width: 70%; display: table-cell; } .right{
css[两个子容器同高且撑起父容器高度]
墨水白云的博客
06-16 2169
面对的问题是： 1.左右不同高 2.整体高度低于当前窗口高度 页面内容分为上中下结构，然后中间有侧边栏和主体内容。 需求是：当中间的内容不够高的时候，让页面内容能够铺满整个屏幕，当中间内容过高的时候自动将内容称起来显示滚动条，并且将侧边栏和主题内容高度同高 第一种方式 侧边栏使用 position:absolute; height:100%; left:0; top:0; right:0; bottom:0; 第二种方式 父容器 display:flex; 子容器 height:inherit .
【CSS】子元素跟父元素的高度一致
热门推荐
向着光芒的女孩
09-27 3万+
绝对定位方法：（1）将父元素设置为绝对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent { /*关键代码*/ position: relative; /*其他样式*/ width: 800px; color: #fff; font-family: "Microsoft Yahei"; text-align: center;
css 弹性盒子和grid网格布局实现九宫格布局，每个格子的宽高一致（跟随页面宽度平分）。
PrimaryColor
04-07 2938
效果图： 高度设置为0，使用内间距100%，就可以将容器宽高的大小设置为一致。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
如何让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...
css实现多个div自适应高度（一样高）
wangzhneg123的博客
03-02 7069
效果展示： 源码展示: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css实现多个div自适应高度（一样高）&lt;/title&gt; &lt;style&gt; .box-block {
CSS父元素高度随子元素高度变化而变化
weixin_33725239的博客
07-23 3426
  &lt;html&gt; &lt;body&gt; &lt;head&gt; &lt;style&gt; #menu{width:1000px;overfloat:hidden;} /* width:1000px;overfloat:hidden; 父元素高度随子元素变化而变化 */ #menu ul{list-style-type:none;} #men...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值