Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve full-screen layout of css, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Full screen layout

The classic full-screen layout consists of three parts: the top, the bottom and the main body, which is characterized by full-screen stretching of about three parts, fixed height of the top and bottom and self-adaptation of the main body. This layout is common and is the mainstream layout for most Web application principals. You usually use, and three tags for semantic typesetting, and you can insert sidebars or other semantic tags.

Position + left/right/top/bottom

The three parts uniformly declare that left:0 and right:0 will stretch it left and right; the top and bottom declare that top:0 and bottom:0 will absorb the top and bottom respectively, and the two heights are fixed values; and the top and bottom of the main body are declared as the top height and the bottom height respectively. The three parts are fixed in a specific position by means of absolute positioning, so that they do not affect each other.

. fullscreen-layout {position: relative; width: 400px; height: 400px; header, footer, main {position: absolute; left: 0; right: 0;} header {top: 0; height: 50px; background-color: # f66;} footer {bottom: 0; height: 50px; background-color: # 66f } main {top: 50px; bottom: 50px; background-color: # 3c9;}}

Flex

It is more concise to implement using flex. By default, display:flex will cause the child nodes to be arranged horizontally. You need to declare that the flex-direction:column changes the direction of the child nodes to the vertical arrangement; the top and bottom are highly fixed, so the principal needs to declare that the flex:1 is highly adaptive.

.fullscreen-layout {display: flex; flex-direction: column; width: 400px; height: 400px; header {height: 50px; background-color: # f66;} footer {height: 50px; background-color: # 66f;} main {flex: 1; background-color: # 3c9;}}

If you want to be scrollable, never declare that overflow:auto allows the container to scroll adaptively, which may lead to adaptive scrolling failure or other unknown effects due to the influence of other formatting contexts. One needs to be inserted and declared as follows.

Div {overflow: hidden; height: 100%;} Thank you for reading this article carefully. I hope the article "how to achieve full-screen layout of css" shared by the editor will be helpful to you. At the same time, I hope you will support us and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.