如何使 div 以与抽屉 React Material UI 相同的宽度粘贴到抽屉底部？

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 />

之外

因此我的问题是：

如何制作一个与<Drawer/> 宽度相同的<div> 出现在<Drawer /> 的底部？

Answer 1

在这种情况下使用 flexbox。

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

在包含两个段落元素的第二个 div 中，您添加另一个 display: flex 和 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>

如何使 div 以与抽屉 React Material UI 相同的宽度粘贴到抽屉底部？

How to make a div stick to bottom of Drawer with same width of the Drawer React Material UI?

html

css

react-material