div底部的页脚，不使用绝对位置

div底部的页脚是网页设计中常见的布局需求，可以通过以下几种方式实现，不使用绝对位置：

使用flex布局：将整个页面内容包裹在一个父容器div中，设置父容器的display属性为flex，同时设置flex-direction为column，这样子元素会按照垂直方向排列。将主要内容区域设置为flex-grow: 1，使其占据剩余空间，然后将页脚放在父容器的最后一个子元素位置即可。

<style>
    .container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .content {
        flex-grow: 1;
    }

    .footer {
        background-color: #f5f5f5;
        padding: 20px;
    }
</style>

<div class="container">
    <div class="content">
        <!-- 主要内容区域 -->
    </div>
    <div class="footer">
        <!-- 页脚内容 -->
    </div>
</div>

使用grid布局：类似于flex布局，将整个页面内容包裹在一个父容器div中，设置父容器的display属性为grid，同时设置grid-template-rows为"auto 1fr auto"，这样子元素会按照垂直方向排列。第一个子元素为页眉，第二个子元素为主要内容区域，第三个子元素为页脚。

<style>
    .container {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
    }

    .header {
        background-color: #f5f5f5;
        padding: 20px;
    }

    .content {
        /* 主要内容区域 */
    }

    .footer {
        background-color: #f5f5f5;
        padding: 20px;
    }
</style>

<div class="container">
    <div class="header">
        <!-- 页眉内容 -->
    </div>
    <div class="content">
        <!-- 主要内容区域 -->
    </div>
    <div class="footer">
        <!-- 页脚内容 -->
    </div>
</div>

使用position属性：将父容器设置为相对定位（position: relative），将页脚设置为绝对定位（position: absolute），并将其放置在底部（bottom: 0）。这种方法需要注意的是，如果页面内容超出了父容器的高度，需要手动设置父容器的最小高度（min-height）为100vh，以确保页脚始终在底部。

<style>
    .container {
        position: relative;
        min-height: 100vh;
    }

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: #f5f5f5;
        padding: 20px;
    }
</style>

<div class="container">
    <!-- 页面内容 -->
    <div class="footer">
        <!-- 页脚内容 -->
    </div>
</div>

以上是三种常见的实现div底部页脚的方法，根据具体需求选择适合的方式进行布局。对于腾讯云相关产品和产品介绍链接地址，可以根据具体的需求和场景选择适合的产品，例如云服务器、云数据库、云存储等。具体的产品介绍和链接地址可以在腾讯云官方网站上查找。