1# Fitting In the Page Content Layout
2
3When **layoutMode(WebLayoutMode.FIT_CONTENT)** is used, the size of the **Web** component can automatically fit in the page content.
4
5This 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:
6
7- 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.
8- 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.
9
10## Specifications and Constraints
11
121. 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.
132. 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.
143. Set the attribute of [keyboard avoidance mode](../reference/apis-arkweb/ts-basic-components-web.md#keyboardavoidmode12) to **RESIZE_CONTENT** to disable this mode.
154. Do not support page zooming.
165. Do not support using the **height** attribute of the **Web** component to change the component height.
176. Support only component height fitting in the page content, but not width fitting.
18
19## When to Use
20
21```typescript
22// fit_content_test.ets
23import { webview } from '@kit.ArkWeb';
24
25@Entry
26@Component
27struct WebHeightPage {
28  private webviewController: WebviewController = new webview.WebviewController()
29  private scroller: Scroller = new Scroller()
30
31  build() {
32    Navigation() {
33      Column() {
34        Scroll(this.scroller) {
35          Column() {
36            Web({
37              src: $rawfile("fit_content.html"),
38              controller: this.webviewController,
39              renderMode: RenderMode.SYNC_RENDER // Set the synchronous rendering mode.
40            })
41              .layoutMode (WebLayoutMode.FIT_CONTENT) // Set the Web component size to fit in the page content.
42              .overScrollMode (OverScrollMode.NEVER) // Disable the overscroll mode.
43            Text('Comments')
44              .fontSize(28)
45              .fontColor("#FF0F0F")
46              .height(100)
47              .width("100%")
48              .backgroundColor("#f89f0f")
49          }
50        }
51
52      }
53    }
54    .title ("Title bar")
55  }
56}
57```
58
59```html
60<!--fit_content.html-->
61<!DOCTYPE html>
62<html>
63<head>
64    <meta charset="UTF-8">
65    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
66    <title>Fit-Content</title>
67</head>
68<body>
69<div>
70    <div><h2 id="When to use">When to use</h2>
71        <p>ArkWeb provides Web components to display web page content in applications. The common application scenarios are as follows:</p>;
72        <ul>
73            <li><p>
74                Web page integration: Applications can use Web components to embed web page content to reduce development costs and improve development and operation efficiency.</p>
75            </li>
76            <li><p>
77                Web browsing: Browser applications can use Web components to open third-party web pages, browse web pages in traceless mode, and set advertisement blocking.</p>
78            </li>
79            <li><p>Applet: Host applications of the applet type can use web components to render applet pages. </p></li>
80        </ul>
81    </div>
82    <div><h2 id="Capabilities">Capabilities</h2>
83        <p>The Web component provides various capabilities for controlling web pages, including: </p>;
84        <ul>
85            <li><p>Web page loading: Declarative loading and off-screen loading of web pages. </p></li>
86            <li><p>Lifecycle management: Managing the lifecycle of components and notifying web pages of loading status changes. </p></li>
87            <li><p>Common attributes and events: UserAgent management, cookie and storage management, font and dark mode management, and permission management. </p>
88            </li>
89            <li><p>
90                Interaction with the application UI: The text selection menu, context menu, and file upload page can be customized to interact with the application UI. </p>
91            </li>
92            <li><p>Applications can interact with web pages through JavaScriptProxy. </p></li>
93            <li><p>Security and privacy: Incognito browsing mode, advertisement blocking, and Advanced Security mode. </p></li>
94            <li><p>Maintenance and debugging capability: DevTools debugging and Crashpad (used to collect Web component crash information).
95            </p></li>
96            <li><p>
97                Other advanced capabilities: same-layer rendering with native components, network and media playback takeover, and custom input method for Web component text boxes. </p>
98            </li>
99        </ul>
100    </div>
101    <div><h2 id="Constraints">Constraints</h2>
102        <ul>
103            <li>Web kernel version: ArkWeb is developed based on Chromium M114.</li>
104        </ul>
105    </div>
106</div>
107</body>
108</html>
109```
110
111
112
113