This is the 12th day of my participation in the August Text Challenge.More challenges in August

In the development of mobile TERMINAL H5 activity page, we often encounter various situations. This time, we want to realize the function that the content of a page is not enough for a screen, but the background wants to cover the whole screen.

Functional analysis:

Generally speaking, the elements are made by open the element content, but in the process of development will inevitably encounter is discontented with the content of a screen, but need to open a screen background (for example: list page is a line of data, but this page has a background, there is no background behind this data to an abrupt end, nothing will be down), summarizing predecessors’ experience, generally has the following solutions:

1. Set the min – height

Set the parent element to min-height: 100%;

Inadequate:

  1. This should automatically expand to the screen size, but if the content is more complex and other styles are set, this will not work and you will need to set the min-height to a specific value (e.g. 5rem).
  2. In addition, if the direct child element has a margin, it will trigger BFC on some phones.

2. Attach an empty div and set the background color to z-index: -100.

Create a single DOM element for the overall content background, set its width and height to 100%, then set a background color and z-index to -100 to avoid affecting other elements. Such as:

<div class="content"> Your content </div><div class="background"></div>

.background{

      width:100%;

      height:100%;

      position:fixed;

      top:0;

      background:#f00;

     z-index:-100;

 }
Copy the code

Inadequate:

  1. If the background is a solid color, or if you have a background image above it and a solid color at the bottom, this is fine, but if the background is not a solid color, it will be obvious that there is a gap in the page, and it will look bad.
  2. Redundant DOM structures are created.

3. Use fake elements (good!!)

<div class="content">Content content...</div>
Copy the code
.content {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:#0ff;
    z-index: -100;
}
Copy the code

By using pseudo-elements, you can avoid creating extra DOM structures, but there are still faults if the background is not solid color.