uni-app中，如何让页面高度适配屏幕

8哥爱前端

在 uni-app 中，要使页面高度适配屏幕，你可以采取以下几种方法：


1. 使用 flex 布局：
你可以使用 CSS 的 flex 布局来确保页面内容自适应屏幕高度。将页面容器的 display 属性设置为 flex，并设置 flex-direction 为 column，这样内容就会垂直堆叠，并自适应屏幕高度。

1. .page-container { /* 假设这是你的外层容器 */
   
2.   display: flex;
   
3.   flex-direction: column;
   
4.   height: 100vh; /* 使用视口单位，确保容器高度等于屏幕高度 */
   
5. }

复制代码

2. 设置 page 的样式：
在 uni-app 中，你可以直接在页面的 <style> 标签中设置 page 的样式。page 是 uni-app 提供的特殊选择器，用于设置页面根元素的样式。

1. page {
   
2.   height: 100%; /* 确保页面高度为全屏 */
   
3.   display: flex;
   
4.   flex-direction: column;
   
5.   justify-content: space-between; /* 内容垂直分布 */
   
6. }

复制代码

3. 为内容设置高度：
如果你想要某个具体的元素（如一个列表或内容区域）填满剩余屏幕空间，可以使用 flex 的 flex-grow 属性。

1. .content-area {
   
2.   flex: 1; /* 占据剩余空间 */
   
3.   overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
   
4. }

复制代码