已实现div宽度自适应设备宽度，求解决div高度自适应及按钮显示不全问题

看起来你已经搞定了宽度自适应，但高度这块卡壳了对吧？别担心，咱们一步步来解决这个问题，确保你的按钮在任何设备高度下都能正常显示。

第一步：确保视口设置正确 #

首先，移动端页面必须先配置好viewport meta标签，让浏览器正确识别设备的视口尺寸。把这个标签加到你的HTML <head> 里：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

这个标签会让页面宽度匹配设备宽度，并且缩放比例正确，是自适应布局的基础。

第二步：让容器Div占满设备高度 #

接下来，要让你的目标div（也就是包含按钮的容器）占满设备的可视高度。可以通过以下几种方式实现：

方法1：使用vh单位（最简单） #

直接给容器设置最小高度为100视口高度：

.button-container {
  width: 100%;
  min-height: 100vh; /* 占满整个视口高度 */
  box-sizing: border-box; /* 避免内边距/边框撑开容器 */
}

vh单位是视口高度的百分比，100vh就是整个设备可视区域的高度。

方法2：通过HTML/BODY的高度继承 #

如果vh在某些老旧设备有兼容性问题，可以用这种方式：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.button-container {
  width: 100%;
  min-height: 100%; /* 继承body的高度 */
  box-sizing: border-box;
}

第三步：确保按钮在高度不足时能正常显示 #

即使容器占满了视口高度，如果按钮太多或者设备高度太小，还是可能被截断。这时候可以给容器加上滚动功能，或者调整按钮的布局：

选项A：让容器可滚动 #

如果希望按钮保持原有布局，只是允许用户滚动查看：

.button-container {
  /* 保留之前的高度设置 */
  overflow-y: auto; /* 垂直方向自动出现滚动条 */
  padding: 1rem; /* 给按钮留点间距，避免贴边 */
}

选项B：用Flex布局优化按钮排列 #

如果想让按钮自动调整布局（比如垂直排列、自动撑开容器），可以用Flex布局：

.button-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* 垂直排列按钮 */
  justify-content: center; /* 按钮垂直居中（可选） */
  align-items: center; /* 按钮水平居中 */
  gap: 1rem; /* 按钮之间的间距 */
  padding: 1rem;
  box-sizing: border-box;
}

.btn {
  /* 保留你原来的.btn样式 */
  width: 80%; /* 让按钮宽度自适应，避免太宽 */
  padding: 0.8rem 1.2rem; /* 给按钮足够的点击区域 */
}

这样当设备高度不足时，容器会自动撑开并允许滚动，保证所有按钮都能被用户看到。

补充你的.btn样式优化 #

看了你给出的.btn部分代码，建议补充一些基础样式，确保按钮在小屏幕上也有良好的点击体验：

.btn {
  position: relative;
  border: 0 !important;
  outline: none !important; /* 替换:focus的outline设置，更简洁 */
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  padding: 0.8rem 1.5rem; /* 增加内边距，提升点击区域 */
  font-size: 1rem; /* 适配小屏幕字体大小 */
  transition: top 0.2s ease; /* 给hover/active的top变化加过渡，更流畅 */
}

.btn:hover {
  top: 2px;
}

.btn:active {
  top: 6px;
}

按照这些步骤调整后，你的容器应该能自适应设备高度，按钮也不会再被截断了。如果还有问题，可以告诉我你的完整HTML结构，我再帮你细化调整~

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