Home > Article > Web Front-end > css achieves the effect that the page content is not high enough and the footer is always at the bottom of the page
css achieves the effect that the page content is not high enough and the footer is always at the bottom of the page
- 青灯夜游forward
- 2018-10-11 17:47:162393browse
This article will introduce to you how to use css to achieve the effect that the page content is not high enough and the footer is always at the bottom of the page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
I believe that many front-end engineers will encounter this situation when developing pages: When the height of the entire page is not enough to occupy one screen of the display screen, and the footer is not at the bottom of the page, it will be a bit unsightly for the user. I think To keep the footer always at the bottom of the page, we may think of using:
1.min-height to control the height of the middle content area so that the height of the page can fill up one screen of the display. However, large website pages are relatively In many cases, the footer is added modularly, and the height of each page is different. It is impossible to set the min-height of the content area in the middle of each page, and the size of the user's display screen is different, so it is impossible to be precise. Setting the min-height height cannot guarantee that the user will see that the footer of the page is not at the bottom or that the scroll bar does not appear on the page;
2. Fixed positioning of the footer: The footer will be displayed at the bottom relative to the fixed positioning of the body. , but when the page has a scroll bar and the page scrolls, the footer will be suspended above the content area. Maybe none of the above is the effect you want.
You can use the following example method to solve your problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猿来是勇者</title>
</head>
<!--方法一-->
<style>
*{margin: 0; padding: 0;}
html,body{height:100%;}
#container{position:relative; width:100%; min-height:100%;padding-bottom: 100px; box-sizing: border-box;}
header{width: 100%; height: 200px; background: #999;}
.main{width: 100%; height: 200px; background: orange;float:left;}
footer{width: 100%; height:100px; /* footer的高度一定要是固定值*/ position:absolute; bottom:0px; left:0px; background: #333;} </style>
<body>
<p id="container">
<header>HEADER</header>
<section class="main">MAIN</section >
<footer>FOOTER</footer>
</p>
</body>
<!--方法二-->
<!--<style>
*{margin: 0; padding: 0;}
html,body{height: 100%;}
#container{display: flex; flex-direction: column; height: 100%;}
header{background: #999; flex: 0 0 auto;height:100px;}
.main{flex: 1 0 auto;}
.bg{background:orange;height:200px;}
footer{background: #333; flex: 0 0 auto;height:100px;} </style>
<body>
<p id="container">
<header>HEADER</header>
<section class="main">
<p class="bg">MAIN</p>
</section>
<footer>FOOTER</footer>
</p>
</body>-->
</html>
Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related tutorials, please visit CSS Video Tutorial!
The above is the detailed content of css achieves the effect that the page content is not high enough and the footer is always at the bottom of the page. For more information, please follow other related articles on the PHP Chinese website!