# Fitting In the Page Content Layout When **layoutMode(WebLayoutMode.FIT_CONTENT)** is used, the size of the **Web** component can automatically fit in the page content. This mode is applicable to the scenario where the **Web** component needs to be expanded based on the web page height and scrolls with other native components. For example: - Browsing long articles. In this case, there are other native components at the same layout level of the **Web** component, such as the comment area and toolbar. - Home page of a long page. In this case, there are other native components at the same layout level of the **Web** component, such as the grid menu. ## Specifications and Constraints 1. Set the [rendering mode](web-render-mode.md) to synchronous to avoid exceptions (white screen and layout errors) caused by the component size exceeding the limit. 2. Disable the [overscroll mode](../reference/apis-arkweb/ts-basic-components-web.md#overscrollmode11). When the overscroll mode is enabled and a user slides to the edge of a web page, the web page is displayed with a spring animation, which conflicts with the rebound effect of the **Scroll** component, affecting user experience. 3. Set the attribute of [keyboard avoidance mode](../reference/apis-arkweb/ts-basic-components-web.md#keyboardavoidmode12) to **RESIZE_CONTENT** to disable this mode. 4. Do not support page zooming. 5. Do not support using the **height** attribute of the **Web** component to change the component height. 6. Support only component height fitting in the page content, but not width fitting. ## When to Use ```typescript // fit_content_test.ets import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebHeightPage { private webviewController: WebviewController = new webview.WebviewController() private scroller: Scroller = new Scroller() build() { Navigation() { Column() { Scroll(this.scroller) { Column() { Web({ src: $rawfile("fit_content.html"), controller: this.webviewController, renderMode: RenderMode.SYNC_RENDER // Set the synchronous rendering mode. }) .layoutMode (WebLayoutMode.FIT_CONTENT) // Set the Web component size to fit in the page content. .overScrollMode (OverScrollMode.NEVER) // Disable the overscroll mode. Text('Comments') .fontSize(28) .fontColor("#FF0F0F") .height(100) .width("100%") .backgroundColor("#f89f0f") } } } } .title ("Title bar") } } ``` ```html Fit-Content

When to use

ArkWeb provides Web components to display web page content in applications. The common application scenarios are as follows:

;

Capabilities

The Web component provides various capabilities for controlling web pages, including:

;

Constraints

```