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：

.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>

Answer 2

您可以添加以下CSS：

 * {
    box-sizing: border-box
 }

如何在主应用程序div中将固定位置的div定位为％宽度？

2 个答案: