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

你可以使用 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>

Answer 2

您可以使用 position="absolute" 框。以下是一些很好的示例：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>

Material UI 位置 Box 元素到父级底部

2 个答案: