css解决办法：左右布局，右边随内容撑高，左边怎么实现跟右边等高

最新推荐文章于 2023-04-17 14:40:08 发布

bananastree

最新推荐文章于 2023-04-17 14:40:08 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css html 盒模型高度自适应

本文链接：https://blog.youkuaiyun.com/qq_34145509/article/details/51917804

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现两个元素等高的布局技巧。通过绝对定位和浮动结合的方式，使得无论内容如何变化，左侧元素的高度始终能与右侧内容高度保持一致。

问题描述：

bb 随内容撑高，不确定高度，aa要同bb等高，纯css

解决办法：

样式
*{margin: 0; padding: 0;}
.cc{margin:0 auto; overflow: hidden; width: 1000px; background-color: #ccc; position: relative;}
.aa,.bb{float: left;}
.aa{background-color: pink; width: 200px;position: absolute; top:0;bottom: 0;}
.bb{background-color: skyblue; width: 800px; padding-left: 200px; }

结构
	
	<div class="cc">
		<div class="aa">aaaaa</div>
		<div class="bb">
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			
		</div>
	</div>