如何将固定位置div定位到主应用程序div中的%宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (60)

我试图编辑我的反应聊天室应用程序,使主应用程序div是80%的网页宽度,并在里面的一切设置为25%的宽度或75%的宽度。我尝试将我的左(房间列表)列设置为Appdiv的25%宽,以及(基本上所有其他的)顶部部分、Message部分和新消息表单设置为Appdiv的75%宽度。

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

截图:https://i.stack.imgur.com/apTGg.png

应用程序(父/容器)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; 
}

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

提问于
用户回答回答于
用户回答回答于

你听说过CSSflexbox布局吗?

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> 

扫码关注云+社区

领取腾讯云代金券