1
yxcoder 16 小时 7 分钟前
上面定高 h1 ,下面定高 h2
中间高度是 calc(100% - [h1+h2]px) 不要用 flex |
2
zhyl 16 小时 5 分钟前
.main .bottom 加上 overflow: hidden;
|
3
oouz 16 小时 2 分钟前
这样?
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> html, body { height: 100%; margin: 0; } body { display: flex; justify-content: center; align-items: center; } .main { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: #F9F9F9; box-sizing: content-box; } .main .top { height: 50px; box-sizing: border-box; display: flex; background-color: #D8D8D8; border-radius: 0px; margin-bottom: 2px; } .main .bottom { flex: 1; display: flex; height: 0; } .main .bottom .left { width: 215px; height: 100%; padding: 3px; box-sizing: border-box; border-right: #E3E3E3 5px solid; overflow-y: auto; } .main .bottom .right { flex: 1; height: 100%; display: flex; flex-direction: column; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .main .bottom .right .title { height: 40px; line-height: 40px; padding: 0 10px; background-color: #F0F0F0; border: #e3e3e3 1px solid; margin: 10px; display: flex; flex-direction: row; } .main .bottom .right .chat-container { flex: 1; height: 0; gap: 13px; margin: 0 10px; padding: 20px; overflow-y: auto; border: 1px solid #eee; } .main .bottom .right .sendbox { height: 180px; margin-top: 10px; border-top: #e3e3e3 1px solid; box-sizing: border-box; display: flex; flex-direction: column; box-sizing: border-box; } </style> </head> <body> <div class="main"> <div class="top"> ggggggggg </div> <div class="bottom"> <div class="left"> <ul class="clientlist no-select"> <center>测试...</center> </ul> </div> <div class="right"> <div class="title"> 111111 </div> <div class="chat-container"> <div style="height:700px;border:1px solid #fff;background-color: #fff;">这里是内容框</div> </div> <div class="sendbox"> 33333333 </div> </div> </div> </div> </body> </html> |
4
shintendo 15 小时 59 分钟前 1
听我的,chat-container 的 flex: 1 改成 flex: 1 1 0 ,并去掉 display: flex
|
5
atfeel OP 经测试,在 bottom 加上 display: flex;height: 100%;,就能正常了
|