html - 如何将固定位置 div 定位到主应用程序 div 内的 % 宽度？

Question

我正在尝试编辑我的 React 聊天室应用程序，以便主应用程序 div 占页面宽度的 80%，并且内部的所有内容都设置为 25% 宽度或 75% 宽度。我正在尝试将我的左(房间列表)列设置为 App div 宽度的 25%，并且(基本上所有其他内容)顶部部分、消息部分和新消息表单设置为 App div 宽度的 75%。

我的问题是我正在设置房间列表列，而我的位置固定元素(顶部用户部分和底部消息输入部分)占据了整个屏幕的 100% 或 75%。我如何让他们只占用应用程序(父级/容器)的 75% 并固定在顶部/底部？

screenshot

应用(父级/容器)CSS:

.App {
  text-align: center;
  height: 500px;
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

当前房间顶部显示:

.currentRoomDisplay {
  z-index: 15;
  height: 60px;
  overflow: hidden;
  margin-left: 25%;
  width: 75%;
  background-color: #e0ebfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:0px;
  position: relative;
  font-family: 'Roboto', sans-serif;
}

底部的消息栏:

.messageBar {
    position: fixed;
    margin-top: 388px;
    text-align: center;
    padding-bottom: 13px;
    width: inherit;
    background-color: #e0ebfc;
    margin-bottom: 0;
    height: 40px;  
    overflow: scroll; 
}

我已经尝试了几个小时了!请帮忙! :D

**如果您需要我复制/粘贴所有内容，我会的

*********更新************弄明白了，谢谢帮助!我在凌晨 3 点修好它，所以我不记得我做了什么，但我会保存它以备将来引用。感谢大家的帮助。

Answer 1

你听说过 CSS flexbox 布局吗？

CSS:

.App {
    ... (other styles)
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: 0 auto;
}

.listRoom {
    ... (other styles)
    flex-direction: column;
    flex-basis: 25%;   
}

.currentRoomBox {
    display: flex;
    flex-direction: column;
    flex-basis: 75%;
}

.currentRoomDisplay {
    ... (other styles)
    display: flex;
    flex-direction: row;
    flex-basis: 100%;   
}

.messageBar {
    ... (other styles)
    display: flex;
    flex-direction: row;
    flex-basis: 100%;   
}

HTML:

<div className="App>
    <div className="listRoom">
        ...
    </div>
    <div className="currentRoomBox">
        <div className="currentRoomDisplay">
        </div>
        <div className="messageBar">
        </div>
    </div>
</div>