如何在主应用div内将固定位置div定位到% width？
如何在主应用div内将固定位置div定位到% width？
提问于 2018-07-28 09:18:57
我正在尝试编辑我的React聊天室应用程序，以便主应用程序div是页面宽度的80%，其中的所有内容都设置为25%宽度或75%宽度。我正在尝试将左侧(房间列表)列设置为应用程序div的25%宽度，以及(基本上所有其他内容)顶部部分、消息部分和新消息表单为应用程序div的75%宽度。
我的问题是，我设置的房间列表列和我的位置固定元素(顶部用户部分和底部消息输入部分)占据了整个屏幕的100%或75%。我如何让他们只获取应用程序(父/容器)的75%，并固定在顶部/底部？
App (父/容器) 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
**如果您需要我复制/粘贴所有内容，我会
*UPDATE*弄清楚了，谢谢你的帮助！我在凌晨3点修复了它，所以我记不清我到底做了什么，但我会保存它以备将来参考。谢谢你们的帮助。
回答 2
Stack Overflow用户
发布于 2018-07-28 11:16:33
你听说过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> Stack Overflow用户
发布于 2018-07-28 09:28:34
您是否可以添加此CSS：
* {
box-sizing: border-box
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51567259
复制相关文章
相似问题