材质UI将Box元素定位到父元素的底部

Question

大家好，我有以下结构：

<Box width="100%" height="100%" p={1}>
<Box my={1} display="flex" justifyContent="center">

</Box>
<Box color="text.disabled">

</Box>
<Box mt={3}>
position at bottom
</Box>
</Box>

我正在尝试将底部框固定到其父框的底部。到目前为止，我已经尝试过：

marginTop: "auto"bottom: 0

它们都不起作用。

Answer 1

您可以使用position="绝对"；盒以下是一些很好的例子：https://www.w3schools.com/css/css_positioning.asp重要的是父框也已定位。这是你的代码扩展：

<Box width="100%" height="100%" p={1} position="relative">
<Box my={1} display="flex" justifyContent="center">

</Box>
<Box color="text.disabled">

</Box>
<Box mt={3} position="absolute" bottom="0px">
position at bottom
</Box>
</Box>

Answer 2

您可以使用flexbox执行类似的操作。

#container {
display: flex;
flex-direction: column;
height: 500px;
}
#top {
background-color: salmon;
min-height: 100px;
}
#middle {
background-color: lightgreen;
min-height: 100px;
flex-grow: 1;
}
#bottom {
background-color: lightblue;
min-height: 50px;
}

<div id='container'>
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>