如何使 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: relative
,bottomContainer
会出现相同的宽度 div in top
并显示在它的下方,而不是 <Drawer />
的底部。
如果我将width: '100%'
设置为bottomContainer
,Abc
将出现在<Drawer />
之外
因此我的问题是:
如何制作一个与<Drawer/>
宽度相同的<div>
,并出现在<Drawer />
的底部?
【问题讨论】:
【参考方案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 以与 Drawer React Material UI 相同的宽度粘在 Drawer 的底部?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 react-native 中结合使用 Drawer Navigation 和 Stack Navigator?
向@react-navigation/drawer 组件发送道具
如何更改 React Material-ui Drawer 菜单项间距?
如何使用 React Navigation Drawer 切换屏幕