Use clip and Outline to automatically fill up the remaining space on the screen

scenario

Foreword: When developing a website, you may often encounter the requirement that each page add a bottom with information about the site, etc.

However, we often encounter the following problems:

Problem description: When the main content of the page is very small (less than one screen including the bottom), the height may be insufficient, resulting in blank space under the bottom.

<div class="hello">
    <header>The head</header>
    <main>The main content</main>
<footer>At the bottom of the</footer>
</div>
Copy the code

First, the conventional page at the bottom of CSS writing and problems

header {
  height: 50px;
  background: #5d6156;
  color: #fff;
}
main {
  height: 500px;
}

footer {
  background: # 212020;
  color: #fff;
  padding: 40px;
}
Copy the code

Effect: if the overall page height is not enough, the bottom of the page is left blank

So, today I’m here to recommend a nice, bottom-padding CSS implementation

Second, use Outline and Clip to automatically fill the remaining space of the screen, thus covering the entire bottom

Solutions:

Set an outline property with a large outline range (which does not take up any space) to ensure complete coverage of the entire screen.

However, the outline can not specify the orientation, can only passively expand around. But we just want to get to the bottom with no white space underneath, we don’t want the top covered as well. So you need a way to hide or remove the top of the bottom. In addition to changing the stacking order of the body content, you can also use the clipping strategy. Clipping the bottom with both the top and left edges is what we want.

.footer > p {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    padding: 15px 0;
    background-color: black;
    outline: 9999px solid black;
    clip: rect(0, 9999px, 9999px, 0);
}
Copy the code

Effect: Set outline to a large value, cover the entire screen, clip the upper edge and the left edge as the boundary

The outline of compatibility

Clip compatibility

To sum up, except ie 6-7, the compatibility between Outline and Clip reaches more than 90%, which is still quite good. Therefore, this is a good application technique to automatically fill the remaining space of the screen

reference

  • CSS World