html - 如何使 div 以与 Drawer React Material UI 相同的宽度粘在 Drawer 的底部？

Question

我用Drawer右手边做一个<Drawer/>，我要1<div>是粘在底部，<Drawer /> 同时，宽度<div>要和那个一样<Drawer /> 。

期望的结果：

这就是我试图实现上述结果的原因：

 const useStyles = makeStyles({
  list: { // <-- this set the width of Drawer
    width: 500,
  },
  bottomContainer: {
    position: "fixed",
    bottom: 0,
    display: 'flex',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin: '30px'
 },
});

但是当我设置时position:fixed，底部的 div 变成了这样：

如您所见，整个 div 是凝胶在一起的，与抽屉的宽度不匹配。但如果设置position: relative，则bottomContainer出现相同的宽度div in top并显示在其下方，而不是底部<Drawer /> 。

如果我设置width: '100%'为bottomContainer，则Abc出现在<Drawer />

因此我的问题是：

如何制作<div> 具有相同宽度<Drawer/> 并出现在底部的<Drawer /> ？

标签： htmlcssreact-material

Answer 1

在这种情况下使用flexbox 。

您应该设置一个包含高度和两个子元素的容器。通过添加display: flex和flex-direction: column。justify-content: space-between

在包含两个段落元素的第二个 div 中，添加另一个display: flexand justify-content: space-between。您无需在flex-direction此处添加，因为默认值为flex-direction: row. 您还可以align-items: center在此处添加以垂直居中对齐内容。

* {
  margin: 0;
  padding: 0;
}

.flex {
  width: 100%;
  height: 500px;
  background-color: grey;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.div1, .div2 {
  width: 100%;
  height: 100px;
  background-color: red;
}

.div2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="flex">
  <div class="div1"></div>
  <div class="div2">
    <p>abc</p>
    <p>123</p>
  </div>
</div>