Html 为什么我能'；即使高度为100%，高度为100vh，也无法获得完整的页面？

我正在构建一个简单的web应用程序，看起来很松弛，我有一个问题，就是页面的宽度和高度都不够。问题是，它实际上会占用一半的时间，而其他时间则会占用更长的时间，但左侧导航栏的尺寸不同，左侧导航栏顶部60%的显示背景颜色与底部40%的显示背景颜色不同

我已经包含了这个片段，我添加了几个参数“height:100%”和“height:100vh”，并将它们添加到*、html和body中，但总是会出现一些不正确的情况

*{
字体大小：16px；
保证金：0；
填充：0；
}
.app{
显示器：flex；
弯曲方向：行；
}
.左导航{
右边框：1px纯黑；
宽度：17%；
填充：0px；
保证金：0；
背景颜色：浅灰色；
颜色：白色；
}
.左导航.标题{
字号：500；
填充顶部：10px；
左侧填充：10px；
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
宽度：100%；
}
.main.messagesListContainer{
弹性：1；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
}
.main.messages列表{
填充物：5px；
}
.main.newMessage{
宽度：100%；
}
.messagesList{
最大高度：450像素；
溢出：自动；
}
.哨兵{
保证金：5px；
边框底部：1px纯黑；
}

渠道
第一频道
第二频道
导航栏在这里
什么是Lorem Ipsum？
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
我们为什么要用它？
读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时出于偶然，有时出于故意（注入幽默等）。
它来自哪里？
与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克（Richard McClintock）从《洛伦·伊普斯姆》（Lorem Ipsum）一段中查找了一个更为晦涩的拉丁语单词，即“Concertetur”，并查阅了古典文学中对该词的引用，发现了该词无可置疑的来源。Lorem Ipsum来自西塞罗于公元前45年所著《德菲尼布斯·博诺勒姆和马洛勒姆》（善与恶的极端）的第1.10.32节和第1.10.33节。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet..”来自第1.10.32节中的一行。

正如您所说，您正在尝试像应用程序一样放松，所以我已经考虑了您顶部的

导航栏和底部的
输入将得到修复

我在这里补充说


height:100vh
到
.app
，因为它是应用程序的包装
溢出：自动
到
.main.messagesListContainer
，使内部内容可以滚动

这应该能解决你的问题


*{
字体大小：16px；
保证金：0；
填充：0；
}
.app{
显示器：flex；
弯曲方向：行；
高度：100vh；
}
.左导航{
右边框：1px纯黑；
宽度：17%；
填充：0px；
保证金：0；
背景颜色：浅灰色；
颜色：白色；
}
.左导航.标题{
字号：500；
填充顶部：10px；
左侧填充：10px；
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
宽度：100%；
}
.main.messagesListContainer{
弹性：1；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
溢出：自动；
}
.main.messages列表{
填充物：5px；
}
.main.newMessage{
宽度：100%；
}
.messagesList{
最大高度：450像素；
溢出：自动；
}
.哨兵{
保证金：5px；
边框底部：1px纯黑；
}

渠道
第一频道
第二频道
导航栏在这里
什么是Lorem Ipsum？Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一个字体
样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表的发行而流行，等等
最近，Aldus PageMaker等桌面发布软件包括Lorem Ipsum版本。我们为什么要用它？读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。这个
使用Lorem Ipsum的要点是，它有一个更多或更多的功能