Usage scenarios

The height of an element needs to be set as a percentage of the width.

For example, if the width of element A is 33.33% of parent element B, and A is required to be A square display area, this scheme can be used.

The solution

<html>
  <body>
    <style>
      .outter {
        width: 500px;
        height: 300px;
        background: black;
      }

      .inner {
        width: 95%;
        padding-bottom: 50%;
        background: grey;
        position: relative;
      }

      .content {
        width: 100%;
        height: 100%;
        position: absolute;
        background: white;
      }
    </style>
    <div class="outter">
      <div class="inner">
        <div class="content">
          <div>test content</div>
          <div>test content</div>
        </div>
      </div>
    </div>
  </body>
</html>
Copy the code

Thinking that

Outter can be understood as any element with a fixed width and height, such as our container under the body. We often use VW/vH to set the width and height according to the viewport.

Inner acts as a container to control the size of the display area, providing a height = width * percentage area.

Content is used as a display area for content to ensure that the content in the content is displayed in the inner area.

Why do you do that?

Resolve the situation where the use of other components within the content results in style misalignment.

When developed as a component, the size of the display area only needs to be adjusted externally based on actual conditions, and there is no need to worry about styling internally.

———— if you understand the code, skip the following ————

The code analysis

This part is to break down the code to save the reader the time to write the code himself.

Setting container size

The first step is to create an area with a specific width and height.

<style>
  .outter {
    width: 500px;
    height: 300px;
    background: black;
  }
</style>
<div class="outter">
</div>
Copy the code

And you get this black area:

Setting up the display area

<style>
      .outter {
        width: 500px;
        height: 300px;
        background: black;
      }
      
+ 		.inner {
+       width: 90%;
+       padding-bottom: 50%;
+       background: grey;
+     }
    </style>
    <div class="outter">
+     <div class="inner">
+     </div>
    </div>
Copy the code

Effect:

So we have a region that is 50% taller than the parent element.

Add content area

<html>
  <body>
    <style>
      .outter {
        width: 500px;
        height: 300px;
        background: black;
      }
      
      .inner {
        width: 50%;
        padding-bottom: 50%;
        background: grey;
      }

+     .content{+width: 100%;
+       height: 100%;
+       background: white; +}</style>
    <div class="outter">
      <div class="inner">
+       <div class="content"></div>
      </div>
    </div>
  </body>
</html>
Copy the code

Writing content in this way sets the width and height of the parent element to something like this:

Fix the problem above

<html>
  <body>
    <style>
      .outter {
        width: 500px;
        height: 300px;
        background: black;
      }
      
      .inner {
        width: 50%;
        padding-bottom: 50%;
        background: grey;
+       position: relative;
      }

      .content {
        width: 100%;
        height: 100%;
        background: white;
+       position: absolute;
      }
    </style>
    <div class="outter">
      <div class="inner">
        <div class="content"></div>
      </div>
    </div>
  </body>
</html>
Copy the code

Effect:

Now you are ready to develop content in Content.