css 自动填充剩余高度 |angular 动态加载 css

.parent{
display: flex;
flex-direction: column;
height: 100%;
}
.child{
flex-grow: 1;
}

通过以上代码，大家可以实现父容器的高度自适应，并自动填充子元素的剩余高度。将子元素的flex-grow属性设置为1即可实现。flex-grow属性决定了元素的增长因子，在flex容器中，元素的大小以其增长因子表示，子元素的flex-grow属性值越大，该元素的增长因子就越大。

需要注意的是，在父容器中设置height: 100%是非常重要的一步，这可以保证父容器能够铺满浏览器窗口，从而实现自适应布局。

除了使用Flex布局，大家还可以利用Grid布局实现自适应布局。下面是一个基于Grid布局的示例代码：

.parent{
display: grid;
grid-template-rows: 1fr auto;
}
.child{
grid-row: 1 / -1;
}

在以上代码中，大家设置了父容器的grid-template-rows属性，使其第一行占据剩余部分（1fr），第二行由子元素自适应（auto）。同时，将子元素的grid-row属性设置为1 / -1，使其占据第一行到最后一行的单元格，从而实现自适应高度。

总的来说，通过CSS自动填充剩余高度可以实现页面元素更加灵活自适应，这对于网页的设计与布局是非常有帮助的。