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 5## When to Use 6 7This mode is applicable to the scenario where the **Web** component needs to be expanded based on the web page height and scrolls with other system components. For example: 8 9- Long articles. In this scenario, there are other system components at the same layout level of the **Web** component, such as the comment area and toolbar. 10- Home page of a long page. In this scenario, there are other system components at the same layout level of the **Web** component, such as the grid menu. 11 12**Web Layout Following the System** 13 14As shown in Figure 1, the height of the **Web** component is the same as the screen height, and the height of the HTML 5 page is 8000 px, which is greater than the height of the **Web** component. In this case, a scroll bar is displayed in the **Web** component. When the **Web** component is scrolled, a part of the page is hidden, and the screen cannot be fully used to display the web page, resulting in poor user experience. 15 16**Web Layout Fitting In the Page Content** 17 18As shown in Figure 3, the height of both the **Web** component and the HTML5 page is 8000 px. In this case, no scroll bar is generated in the **Web** component. When a user scrolls the page, other ArkUI components are scrolled at the same time, and the **Web** component is displayed on the entire screen, as shown in Figure 4. 19 20| Figure 3 Web layout fitting in the page content| Figure 4 Real effect of the web layout| 21| --- | --- | 22|  |  | 23 24## Specifications and Constraints 25 261. 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. 272. Disable the [overscroll mode](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#overscrollmode11). When the overscroll mode is enabled and a user scrolls 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. 283. Set the attribute of [keyboard avoidance mode](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#keyboardavoidmode12) to **RESIZE_CONTENT** to disable this mode. 294. Do not support page zooming. 305. Do not support using the **height** attribute of the **Web** component to change the component height. 316. Support only component height fitting in the page content, but not width fitting. 327. Do not support the waterfall page. 33 34## Sample Code 35 36```typescript 37// fit_content_test.ets 38import { webview } from '@kit.ArkWeb'; 39 40@Entry 41@Component 42struct WebHeightPage { 43 private webviewController: WebviewController = new webview.WebviewController() 44 private scroller: Scroller = new Scroller() 45 46 build() { 47 Navigation() { 48 Column() { 49 Scroll(this.scroller) { 50 Column() { 51 Web({ 52 src: $rawfile("fit_content.html"), 53 controller: this.webviewController, 54 renderMode: RenderMode.SYNC_RENDER // Set the synchronous rendering mode. 55 }) 56 .layoutMode (WebLayoutMode.FIT_CONTENT) // Set the Web component size to fit in the page content. 57 .overScrollMode (OverScrollMode.NEVER) // Disable the overscroll mode. 58 Text('Comments') 59 .fontSize(28) 60 .fontColor("#FF0F0F") 61 .height(100) 62 .width("100%") 63 .backgroundColor("#f89f0f") 64 } 65 } 66 67 } 68 } 69 .title ("Title bar") 70 } 71} 72``` 73 74```html 75<!--fit_content.html--> 76<!DOCTYPE html> 77<html> 78<head> 79 <meta charset="UTF-8"> 80 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 81 <title>Fit-Content</title> 82</head> 83<body> 84<div> 85 <div><h2 id="When to use">When to use</h2> 86 <p>ArkWeb provides Web components to display web page content in applications. The common application scenarios are as follows:</p>; 87 <ul> 88 <li><p> 89 Web page integration: Applications can use Web components to embed web page content to reduce development costs and improve development and operation efficiency.</p> 90 </li> 91 <li><p> 92 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> 93 </li> 94 <li><p>Applet: Host applications of the applet type can use web components to render applet pages. </p></li> 95 </ul> 96 </div> 97 <div><h2 id="Capabilities">Capabilities</h2> 98 <p>The Web component provides various capabilities for controlling web pages, including: </p>; 99 <ul> 100 <li><p>Web page loading: Declarative loading and off-screen loading of web pages. </p></li> 101 <li><p>Lifecycle management: Managing the lifecycle of components and notifying web pages of loading status changes. </p></li> 102 <li><p>Common attributes and events: User-Agent management, cookie and storage management, font and dark mode management, and permission management. </p> 103 </li> 104 <li><p> 105 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> 106 </li> 107 <li><p>Applications can interact with web pages through JavaScriptProxy. </p></li> 108 <li><p>Security and privacy: Incognito browsing mode, advertisement blocking, and Advanced Security mode. </p></li> 109 <li><p>Maintenance and debugging capability: DevTools debugging and Crashpad (used to collect Web component crash information). 110 </p></li> 111 <li><p> 112 Other advanced capabilities: same-layer rendering with system components, network and media playback takeover, and custom input method for Web component text boxes. </p> 113 </li> 114 </ul> 115 </div> 116 <div><h2 id="Constraints">Constraints</h2> 117 <ul> 118 <li>Web kernel version: ArkWeb is developed based on Chromium M114.</li> 119 </ul> 120 </div> 121</div> 122</body> 123</html> 124``` 125 126## FAQs 127 128### What should I do if the scroll bar still appears in the Web component when FIT_CONTENT is set? 129 130**Possible Causes** 131 132- The height of the internal HTML5 page exceeds 7680 px (physical pixel), but the rendering mode is not set to [synchronous rendering mode](web-render-mode.md). 133- The **metaviewport** attribute is not configured. 134 135**Solution** 136 137- Change the rendering mode to [synchronous rendering mode](web-render-mode.md). 138- Configure **<\meta name="viewport" content="width=device-width, initial-scale=1.0">** on the HTML5 page. 139 140 141### What should I do if a white screen is displayed or the page disappears after FIT_CONTENT is set? 142 143**Possible Causes** 144 145The height of the DOM node of the core content is 0. 146 147If the CSS **height: <number& > vh** is conflict with the **Web** component size adaptation page layout, check whether **height: vh** is the first CSS height style from the body node. For example, in the following structure, the height of the DOM node whose ID is 2 is 0. 148 149``` 150<body> 151 <div id = "1"> 152 <div id = "2" style = "height: 100vh">Child DOM</div> 153 <div id = "3" style = "height: 20px">Child DOM</div> 154 </div> 155</body> 156``` 157 158**Solution** 159 160- Use a specific height style for the child DOM to extend the parent element. 161 162 ``` 163 <body> 164 <div id = "1"> 165 <div id = "2"><div style = "height: 20px"><div/></div> 166 <div id = "3" style = "height: 20px">Child DOM</div> 167 </div> 168 </body> 169 ``` 170 171- Use the actual height style for the parent element. 172 173 ``` 174 <body> 175 <div id = "1"> 176 <div id = "2" style = "height: 20px">Child DOM</div> 177 <div id = "3" style = "height: 20px">Child DOM</div> 178 </div> 179 </body> 180 ``` 181
