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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

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

</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 #ccc;">这里是内容框</div>
</div>
<div class="sendbox">
33333333
</div>
</div>
</div>
</div>
</body>
</html>

5 条回复 • 2024-12-25 13:45:03 +08:00

yxcoder

16 小时 49 分钟前

上面定高 h1 ，下面定高 h2

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

zhyl

16 小时 48 分钟前

.main .bottom 加上 overflow: hidden;

oouz

16 小时 45 分钟前

这样？

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

shintendo

16 小时 42 分钟前

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

atfeel

16 小时 32 分钟前

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