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

Posted

技术标签:

【中文标题】如何使 div 以与 Drawer React Material UI 相同的宽度粘在 Drawer 的底部?【英文标题】:How to make a div stick to bottom of Drawer with same width of the Drawer React Material UI? 【发布时间】:2020-12-05 16:35:51 【问题描述】:

我用<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: relativebottomContainer 会出现相同的宽度 div in top 并显示在它的下方,而不是 &lt;Drawer /&gt; 的底部。

如果我将width: '100%' 设置为bottomContainerAbc 将出现在&lt;Drawer /&gt; 之外

因此我的问题是:

如何制作一个与&lt;Drawer/&gt; 宽度相同的&lt;div&gt; ,并出现在&lt;Drawer /&gt; 的底部?

【问题讨论】:

【参考方案1】:

在这种情况下使用 flexbox

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

在包含两个段落元素的第二个 div 中,添加另一个 display: flexjustify-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 以与 Drawer React Material UI 相同的宽度粘在 Drawer 的底部?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 react-native 中结合使用 Drawer Navigation 和 Stack Navigator?

向@react-navigation/drawer 组件发送道具

如何更改 React Material-ui Drawer 菜单项间距?

如何使用 React Navigation Drawer 切换屏幕

ReactJS + React Router:如何使 div 居中?

使 iTerm 以与其他操作系统相同的方式翻译“元密钥”