如何在JSX页面底部定位元素?

Question

我想知道如何在JSX中实现这一点。我尝试使用CSS样式如下，但我想要固定底部的位置，同时从父继承左边。如果我不继承left，容器就不会与我的其他组件对齐。

<div className="container" style={{ position: "fixed", bottom: "10%", left: "want to inherit from parent element here" }}>

感谢您的帮助!谢谢。

Answer 1

// parent element
<div 
style={{
position: 'relative',
backgroundColor: 'orange',
height: '100vh',
width: '100vw',
marginLeft: 100,
}}
>
// child element
<div 
style={{
position: 'fixed',
backgroundColor: 'blue',
height: '10vh',
width: '10vw',
bottom: 0,
left: 'inherit'
}}
>
</div>
</div>

Answer 2

<Router>
<div
className="container-fluid"
style={{
height: "100vh",
width: "100%",
backgroundImage: `url(${world_map})`,
backgroundSize: "auto",
}}
>
<NavBar />
<Switch>
<Route path="/" exact component={MainMenu} />
<Route path="/services" component={ServicesMenu} />
<Route path="/autoconnect" component={AutoConnectMenu} />
<Route path="/gatt" component={GATTMenu} />
<Route path="/characteristics" component={CharMenu} />
<Route path="/scan" component={ScanMenu} />
<Route path="/connect" component={ConnMenu} />
<Route path="/write" component={WriteMenu} />
<Route path="/notify" component={NotifyMenu} />
</Switch>
<div
className="container"
style={{ position: "fixed", bottom: "10px", left: "inherit" }}
>
<div className={"alert alert-" + this.state.msgType}>
<span
style={{
fontFamily: "helvetica",
fontWeight: "bold",
}}
>
Message from Base Station:
</span>
{this.state.msg}
</div>
</div>
</div>
</Router>