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