如何解决设置height:100vh后页面元素显示异常、内容被裁剪且无法实现无滚动条布局的问题？

嘿，我来帮你搞定这个页面布局的问题！你想要页面严格占满100vh且没有滚动条，但目前主容器超出屏幕导致元素被裁剪，咱们可以通过调整CSS的布局属性来解决，具体方案如下：

1. 重置全局默认样式，消除浏览器边距影响 #

浏览器默认会给html和body添加margin/padding，这会导致页面超出视口。先把这些默认样式清零，同时设置视口高度和隐藏滚动：

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden; /* 直接隐藏页面级滚动条 */
}

2. 让根容器和主容器占满整个视口 #

设置#root和.app_container的高度为100%，并用flex垂直布局来分配导航区和游戏区的空间，避免容器超出：

#root, .app_container {
  height: 100%;
  display: flex;
  flex-direction: column; /* 垂直排列导航和游戏区域 */
}

3. 分配导航与游戏区域的空间 #

让导航栏保持固定高度（不被压缩），游戏区域占满剩余视口空间，同时处理内部内容的滚动：

.navigation {
  flex-shrink: 0; /* 导航栏保持自身高度，不会被挤压 */
  padding: 1rem;
  background-color: #f5f5f5; /* 可选，给导航加个背景区分 */
}

.game {
  flex: 1; /* 占满导航栏之外的全部剩余高度 */
  overflow: auto; /* 如果游戏区域内容过多，仅在区域内部滚动 */
  padding: 1rem;
  box-sizing: border-box; /* 确保padding不会让容器超出父元素高度 */
}

4. 调整内部网格容器的尺寸（针对.quiz和选项区域） #

确保游戏内的网格容器不会超出父元素，用flex和grid结合来适配空间：

.quiz {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.question_text {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.answer_choices {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.answer_choice {
  padding: 1rem;
  background-color: #e8e8e8;
  border-radius: 6px;
  cursor: pointer;
}

这样设置后，整个页面会严格保持100vh高度，没有页面级滚动条；导航栏固定高度不会被压缩，游戏区域占满剩余空间，内部内容过多时只会在游戏区内滚动，不会导致元素被裁剪或显示异常。

内容的提问来源于stack exchange，提问作者Egor Chernyshev