GPT4 都无法修复的“CSS+DIV 自动填充高度并显示自动滚 ...

作者：atfeel 发布时间：昨天 14:02

以下 HTML 代码，我搞不定，丢给 GPT4 也搞不定，由于 title 和 sendbox 高度固定的，如何让 chat-container 自动填充 right 的剩余高度，再让 chat-container 的内容会超出当前高度时自动显示滚动条，我已经尽力了，chat-container 依然还是被撑破高度，向各位大佬请教了

      html, body{height:100%;margin:0; overflow:hidden;}
      body{display: flex;justify-content: center; align-items: center;}
      .main{display:flex;flex-direction:column;width:100%;height:100%;background-color:#F9F9F9;border:#cccccc 1px solid;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;}
      .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;overflow:hidden;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{display:flex;flex:1;flex-direction:column;gap:13px;margin:0 10px;padding:20px;overflow-y:auto;position:relative;}
      .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;}

      ggggggggg



            测试...




            111111


      这里是内容框


33333333

yxcoder 昨天 14:03

上面定高 h1 ，下面定高 h2
中间高度是 calc(100% - [h1+h2]px)
不要用 flex

zhyl 昨天 14:04

.main .bottom 加上 overflow: hidden;

oouz 昨天 14:04

这样？

      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;
      }


         ggggggggg




                  测试...




                  111111


                  这里是内容框


                  33333333

shintendo 昨天 14:05

听我的，chat-container 的 flex: 1 改成 flex: 1 1 0 ，并去掉 display: flex

atfeel

OP

昨天 14:06

经测试，在 bottom 加上 display: flex;height: 100%;，就能正常了

GPT4 都无法修复的“CSS+DIV 自动填充高度并显示自动滚动条”

热门主题

医生擅自拆下摄像头遭处罚？

客机失事幸存者：降落前发生爆炸

有没有好的审批流工具推荐？

坠机现场生还者下机坐地哭喊被拖走

这个网站 99.999%代码是 ai 写的，小试牛

客机失事幸存者:降落前发生爆炸

线上开电子发票是必须得登录手机号吗？我想

京东为什么近期要给客服涨薪？以及，不给快

sublime 中有好用的 todo list 插件吗？

mysql 求助

热门板块

公告

网站帮助 - Yoo趣儿

我们的愿景

在 Yoo趣儿投放广告

Yoo趣儿网站用户应遵守规则