利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高

最新推荐文章于 2023-05-04 23:00:01 发布

章鱼哥揍蜡笔小新

最新推荐文章于 2023-05-04 23:00:01 发布

阅读量574

点赞数 1

分类专栏： css 文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_44095605/article/details/125643435

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如题，本人经常设置宽高都是这种，先通过js获取父元素的宽高，别的子元素的宽高。再通过js赋值

this.height = this.$refs.xxx.offsetHeight - this.$refs.xxx.offsetHeight
<div :style="{'height':height+'px'}"></div>

当然以上的办法看起来就不太好，奈何本人水平有限，有没得别的方法，只能凑活这样用了

后来参考大神的项目发现了好的解决方案：父元素设置flex属性，子元素占位1 从而设置宽度如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				height: 100vh;
				display: flex;
				overflow: auto;
				/* flex-direction: row; 默认就是这个我就不设置了*/
			}
			.kk{
				flex: 1;
				background: lightblue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>ve</h1>
			<div class="kk">
				sfde
			</div>
			<h1>ddd</h1>
			
		</div>
	</body>
</html>

效果图如下

下面进阶一下子元素占位1 从而设置高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				height: 100vh;
				display: flex;
				overflow: auto;
				/* flex-direction: row; 默认就是这个我就不设置了 */ 
			}
			.kk{
				flex: 1;
				background: lightblue;
				display: flex;/*重要*/
				flex-direction: column;/*重要*/
			}
			.gg{
				flex: 1;/*重要*/
				background-color: yellow;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box">
			<h1>ve</h1>
			<div class="kk">
				sfde
				<div class="gg">
					fefe
				</div>
			</div>
			<h1>ddd</h1>
			
		</div>
	</body>
</html>

总接一下：父元素一要设置flex,flex-direction 子元素设置占位1（我总觉得这是一种css布局方式，有名字，但是我不晓得，知道的大佬麻烦评论区告知一下谢谢

章鱼哥揍蜡笔小新

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高

利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高,父元素一要设置flex,flex-direction 子元素设置占位1
复制链接

扫一扫