<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>底部一直在页面的最下面</title>
</head>
<style>
*{padding: 0;margin: 0;}
html,body{height: 100%;}
body{display: flex;flex-direction: column;}
.container{flex:1 0 auto;}
.jiegou-head,.jiegou-foot{flex:0 0 auto;}
.jiegou-head{background-color:#ddd;height: 50px;}
.jiegou-foot{background-color: aquamarine;height: 100px;}
</style>
<body>
<header class="jiegou-head">头部</header>
<div class="container">
中间内容区域
</div>
<footer class="jiegou-foot">尾部</footer>
</body>
</html>
The bottom of the html page stays at the bottom of the page all the time
おすすめ
転載: blog.csdn.net/spring_007_999/article/details/129750893
おすすめ
ランキング