How to set element height to window height in uniapp

With the development of the mobile Internet, mobile phones have become an indispensable part of people's lives, and the development of mobile terminals has received more and more attention. As a cross-platform development framework, uniapp plays a crucial role in mobile development. In uniapp, setting the element height to the window height is a common requirement. This article will introduce how to achieve it in detail.

1. Setting through css style

In uniapp, we can set the height of the element through css style. The common way is to set the window height to the element height. The specific steps are as follows:

1. Get the window height

In uniapp, we can use the uni.getSystemInfo() method to get the system information of the current device, including the window height. For example:

const systemInfo = uni.getSystemInfoSync()
const windowHeight = systemInfo.windowHeight

2. Set the height of the element

After getting the height of the window, we can set the height of the element to the height of the window. For example:

<view class="container" style="height: {{windowHeight}}px;"></view>

Among them, container is the class name of the element, height in the style attribute is the height attribute of the element, and {{windowHeight}} is the variable of the window height.

In this way, we can set the height of the element to the height of the window to achieve the page adaptive effect.

2. Setting through flex layout

In addition to setting through css style, we can also use flex layout to achieve the effect of the height of the element being the height of the window. The specific steps are as follows:

1. Set the height of the main container

In the first step, we need to set the height of the main container to 100vh, which is 100% of the window height. For example:

<view class="container"></view>
<style lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>

The display attribute is set to flex, and the flex-direction attribute is set to column, so that the elements in the container will be arranged in the vertical direction.

2. Set the flex-grow attribute of the child element

In the second step, we need to set the flex-grow attribute of the child element so that it can occupy the remaining height of the container. For example:

<view class="container">
  <view class="content"></view>
</view>
<style lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
</style>

where content is the class name of the child element, and the flex-grow attribute is 1, which means that the element will occupy the full height of the available space.

In this way, we can also achieve the effect that the height of the element is the height of the window.

3. Summary

This article introduces two methods to achieve the effect of the element height in uniapp being the window height, respectively through css style and flex layout. Specific operations need to be adjusted according to specific circumstances. I hope this article can be helpful to everyone.

The above is the detailed content of How to set element height to window height in uniapp. For more information, please follow other related articles on the PHP Chinese website!