底部固定，高度自动，跟随滚动条滚动

最新推荐文章于 2023-04-08 16:47:30 发布

转载最新推荐文章于 2023-04-08 16:47:30 发布 · 567 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=hkij1bbaa&title=%E5%BA%95%E9%83%A8%E5%9B%BA%E5%AE%9A%EF%BC%8C%E9%AB%98%E5%BA%A6%E8%87%AA%E5%8A%A8%EF%BC%8C%E8%B7%9F%E9%9A%8F%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%BB%9A%E5%8A%A8

前端专栏收录该内容

493 篇文章

订阅专栏

本文深入探讨了使用CSS实现复杂网页布局的技巧，包括如何利用负边距和绝对定位实现全屏背景，以及如何通过padding和margin调整内容位置。通过具体实例，展示了如何创建一个带有固定底部元素的全屏页面布局。

现在的样式，看起来简单，但里面深奥的东西太多，套路太多，还是自己不够聪明呀！！！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    html,
    body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .a1{
        width: 100%;
        min-height: 100%;
        margin-bottom: -80px;
        background: #090;
        overflow: hidden;
    }
    .content{
        padding-top: 9999px;
        margin-top:  -9999px;
        background: #900;
        padding-bottom: 80px;
    }
    .a2{
        width: 100%;
        height: 80px;
        background: #009;
    }
    </style>
</head>
<body>
<div class="a1">
    <div class="content">
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        <!-- test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />test<br /> -->

    </div>
</div>
<div class="a2"></div>
</body>
</html>