如何在主应用程序 div 内将固定位置 div 定位到 % 宽度？答案

【问题标题】：How do I position fixed-position div to % width inside main app div?如何在主应用程序 div 内将固定位置 div 定位到 % 宽度？
【发布时间】：2018-07-28 01:18:57
【问题描述】：

我正在尝试编辑我的 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 点修好它，所以我不记得我做了什么，但我会保存它以供将来参考。谢谢大家的帮助。

【问题讨论】：

标签： html css reactjs

【解决方案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>

【讨论】：

【解决方案2】：

你能添加这个 CSS：

 * {
    box-sizing: border-box
 }

【讨论】：