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

如题，本人经常设置宽高都是这种，先通过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布局方式，有名字，但是我不晓得，知道的大佬麻烦评论区告知一下谢谢

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

html第八章制作花样链接卡,利用flex布局横向滚动制作滑动选项卡以及内容滑块...
利用flex布局横向滚动首先介绍一下什么是flex布局,为啥喜欢用flex布局呢,枫瑞之前在做项目的评论留言的时候采用浮动(float),又要两边对齐,有要左浮动,又要右浮动,最后话要防止塌陷.在认 ...
利用flex布局实现仿微信群的多头像九宫格自适应布局
利用flex布局实现微信群的多头像自适应布局微信群聊的头像是多个成员的组合,例如下图. 可以看到根据单个小头像的大小可以分为三类,分别可以看做是整个大头像的98%,47%和31%.所以可以根据单个数 ...
02、在层级未知情况下通过递归查找子物体
1.在在层级未知情况下通过递归查找子物体 ,这个主要是用于UI的的层级查找中 2.代码: 1 using System.Collections; 2 using System.Collections. ...
在高并发的情况下，利用redis来处理库存超卖和遗留问题
在高并发的情况下,利用redis来处理库存超卖和遗留问题首先现在redis中放上商品的库存数量为100间商品,在初始化一个set集合用于放秒杀成功的用户id,本用例先放进去一个id=10000的用户 ...
网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
主要是利用flex的一些特性来写的,掌握好flex基础,写出筛子的几个页面不是问题. 推荐去我写的一个博客中有flex的小练习线上练习flex布局 html css .shaizi { width: ...
利用flex布局实现六个骰子
一.初步布局 1.我们先设立一个外部盒子用flex布局将子代居中 .father {display: flex;margin: 200px auto;border-top: 2px solid #82 ...
第一个子元素在未超过父元素高度的情况下设置margin-top导致出现竖向滚动条的问题
首先要说明的是在什么情况下会出现这种问题: 在移动端,我们经常会设置html,body的height为100%,让处于最外面的父级元素刚好充满整个屏幕高度,但是,如果此时body下面第一个子元素,刚好 ...
Day04 利用flex布局完成PC端网页设计CSS+html部分
没学JS,而且还是不会创建仓库,所还是干巴巴的代码了 HTML <!DOCTYPE html> <html lang="en"><head>&l ...
IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
项目中使用的是DIV+CSS布局,有一个页面是同事完成的,这几天他请假有事.项目发现一个UI Bug.在IE7下,某一个Div的padding-top会让整个div产生padding-bottom样式 ...

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

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

最新文章

热门文章