From b1b2d653e7997d30612eaaadec58857644e54eca Mon Sep 17 00:00:00 2001 From: Liu Date: Thu, 27 Jun 2024 14:40:41 +0800 Subject: [PATCH] =?UTF-8?q?Update=20=E4=B8=80=E5=8F=A5=E8=AF=9D=E8=AF=B4?= =?UTF-8?q?=E6=98=8E=E5=A6=82=E4=BD=95=E4=BD=BF=E5=AD=99=E5=85=83=E7=B4=A0?= =?UTF-8?q?=E5=BC=B9=E6=80=A7=E8=8E=B7=E5=8F=96=E9=AB=98=E5=BA=A6.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...350\216\267\345\217\226\351\253\230\345\272\246.md" | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git "a/\346\212\200\346\234\257/\347\236\216\346\212\230\350\205\276/\344\270\200\345\217\245\350\257\235\350\257\264\346\230\216\345\246\202\344\275\225\344\275\277\345\255\231\345\205\203\347\264\240\345\274\271\346\200\247\350\216\267\345\217\226\351\253\230\345\272\246.md" "b/\346\212\200\346\234\257/\347\236\216\346\212\230\350\205\276/\344\270\200\345\217\245\350\257\235\350\257\264\346\230\216\345\246\202\344\275\225\344\275\277\345\255\231\345\205\203\347\264\240\345\274\271\346\200\247\350\216\267\345\217\226\351\253\230\345\272\246.md" index 4cbc875..593ee9d 100644 --- "a/\346\212\200\346\234\257/\347\236\216\346\212\230\350\205\276/\344\270\200\345\217\245\350\257\235\350\257\264\346\230\216\345\246\202\344\275\225\344\275\277\345\255\231\345\205\203\347\264\240\345\274\271\346\200\247\350\216\267\345\217\226\351\253\230\345\272\246.md" +++ "b/\346\212\200\346\234\257/\347\236\216\346\212\230\350\205\276/\344\270\200\345\217\245\350\257\235\350\257\264\346\230\216\345\246\202\344\275\225\344\275\277\345\255\231\345\205\203\347\264\240\345\274\271\346\200\247\350\216\267\345\217\226\351\253\230\345\272\246.md" @@ -11,8 +11,10 @@ keywords: ['html', 'css'] # 一句话说明如何使孙元素弹性获取高度 -- 父元素使用 `display: flex; flex-directrion: column;` -- 子元素使用 `flex: 1 1 0px; min-height: 0px;` 或者 `flex: 1 1 content; min-height: 0px;` -- 孙元素使用 `height: 100%;` +背景： 在写一些通用的`Scroll`组件时，简单的一句`height: 100%`是无法从没有定高的父元素中获取高度的。 -PS：flex: 1 1 0px 不能缩写成 flex: 1，因为 flex: 1 实际上是 flex: 1 1 0%，在 flex-basis 是百分比时，是通过父元素的 height 来进行取值的，而此时父元素的 height 是 auto，所以子元素无法获得一个定高，也因此孙元素无法从 100% 继承到高度。 +- 父元素使用 `display: flex; flex-directrion: column;min-height: 100px;`，其中 min-height 也可以换成`flex: 1; min-height: 0px;`，来充满爷容器的剩余高度。 +- 子元素使用 `flex: 1 1 0px; min-height: 0px;` +- 孙元素使用 `height: 100%; overflow: auto;` + +PS：子元素的 flex: 1 1 0px 不能缩写成 flex: 1，因为 flex: 1 实际上是 flex: 1 1 0%，在 flex-basis 是百分比时，是通过父元素的 height 来进行取值的，而此时父元素的 height 是 auto，所以子元素无法获得一个定高，也因此孙元素无法从 100% 继承到高度。只有当 flex-basis 设定为 0px，它才会动态去取父元素的高度。而此时孙元素就是一个高度继承于父组件可滚动的盒子了。