“This is the sixth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

preface

Recently, after being tortured by the UI, I found a lot of duplicate code when modifying the style, especially in the layout, the duplicate code is especially much, so I decided to review some layout here, hereby record.

layout

Full screen layout

  • Full-screen layout can be said to be a very classic layout, in each major UI frame can see his figure.

  • It is composed of the top, the main content and the bottom. The left and right sides are full of screen stretching, and the top and bottom are fixed in height. The main content adopts the form of self-adaptation. Use

    ,

    , and

    tags for layout, and you can add sidebars if you want.


  • So let’s do it together.

<div class="layout"> 
    <header></header> 
    <centent></centent> 
    <footer></footer> 
</div>
Copy the code

implementation

Remember the features of the full-screen layout, you can use the left: 0 and right: 0 to achieve the effect of full content, top: 0 and bottom: 0 to achieve the top and bottom, and according to your own needs, set the corresponding height of the top and bottom; Then set the height of the body content through top and bottom.

.layout { position: relative; width: 1920px; height: 1080px; header, footer, content { position: absolute; left: 0; right: 0; } header { top: 0; height: 150px; background-color: crimson; } footer { bottom: 0; height: 150px; background-color: blue; } content { top: 150px; bottom: 150px; background-color: gray; }}Copy the code

Of course, someone was smart enough to come up with display: Flex, and yes, it’s perfectly fine to use it, too, and make your code much cleaner. First, use flex-direction: column to change the arrangement of child nodes to vertical. And set the top and bottom heights, and set the body content to Flex: 1 to make it self-adaptive.

.layout { display: flex; flex-direction: column; width: 1920px; height: 1080px; header { height: 150px; background-color: crimson; } footer { height: 50px; background-color: blue; } content { flex: 1; background-color: gray; }}Copy the code

Well, that’s all for today. You are still the best today. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!