[Different CSS] 3 ways to achieve a full-screen layout

If the other shore prosperousfalls, who accompany me to see the sunset fleeting

Writing in the front

How well you know CSS layouts determines how fast you can develop pages in Web development. As Web technology continues to evolve, there are countless ways to implement layouts.

I recently put together a series of articles over the course of half a month, using fragment time, that summarized the various layouts in CSS, as well as their implementation methods and common techniques. This series gives you a new look at CSS layouts.

This series of navigation post I enter, which can quickly jump to the article you want to know (suggested favorites)

Full screen Layout Overview

The full-screen layout is mainly applied in the background, and the main effects are as follows:

Three ways to achieve a full-screen layout

Before we start today’s article, let’s put today’s main code in the following:

The common CSS styles are as follows:

body {
  margin: 0;
}
body.html..container {
  height: 100vh;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}
.content {
  background-color: #52c41a;
  /* * For the layout of the middle department, see the two-column three-column layout */
  display: grid;
  grid-template-columns: auto 1fr;
}
.left {
  width: 240px;
  background-color: #52c41a;
  font-size: 80px;
  line-height: calc(100vh - 200px);
}
.right {
  background-color: #f759ab;
  font-size: 60px;
}
.header {
  height: 100px;
  background-color: #70a1ff;
}
.footer {
  height: 100px;
  background-color: #ff7a45;
}
.header..footer {
  line-height: 100px;
  font-size: 52px;
}
Copy the code

The HTML structure is as follows:

<div class="container">
    <div class="header">header</div>
    <div class="content">
        <div class="left">navigation</div>
        <div class="right">
            <div class="right-in">Adaptive, scroll bar appears beyond height</div>
        </div>
    </div>
    <div class="footer">footer</div>
</div>
Copy the code

You can refer to the layout of the three columns in the middle

Use the calc function

The implementation steps are as follows:

  1. Calculate the height of the intermediate container using the calc function.
  2. Container Settings with a scrollbar in the middleoverflow: autoThat is, when the scroll bar appears, the scroll bar appears.

The implementation code is as follows:

.content {
    overflow: hidden;
    /* Calculate the height of the container by calc */
    height: calc(100vh - 200px);
}
.left {
    height: 100%;
}
.right {
    /* If it exceeds the scroll bar */
    overflow: auto;
    height: 100%;
}
.right-in {
    /* Assume the container has 500px elements */
    height: 500px;
}
Copy the code

Using the Flex solution

Using Flex to implement this layout is relatively simple, as shown in the following example code:

.container {
    /* Enable flex layout */
    display: flex;
    /* Change the layout direction of the child elements to vertical */
    flex-flow: column;
}
.content {
    /* If it exceeds the scroll bar */
    overflow: auto;
    /* Set the middle part to be adaptive */
    flex: 1;
}
.right-in {
    /* Assume the container has 500px elements */
    height: 500px;
}
Copy the code

For detailed usage of the Flex layout, please refer to my entry

Using grid solutions

The grid layout is very handy to implement, using the template property, as shown in the following code:

.container {
    /* Start grid layout */
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.content {
    /* If it exceeds the scroll bar */
    overflow: auto;
}
.right-in {
    /* Assume the container has 500px elements */
    height: 500px;
}
Copy the code

For details on how to use Grid layout, please refer to me

conclusion