[分享]css中底部div被覆盖

元素来定义一个容器，然后在 CSS 中使用 position 属性来控制它的位置。当我们将一个 div 定位为绝对位置时，它会根据其父元素来定位。如果没有设置父元素的高度，则底部的 div 就会被其它元素覆盖。
为了解决这个问题，我们可以给父元素设置一个固定的高度。比如：

<br> <br>
    <div class="wrapper"><br>
        <div class="header">Header</div><br>
        <div class="content">Content</div><br>
        <div class="footer">Footer</div><br>
    </div><br>

    .wrapper {<br>
        height: 100%;<br>
        position: relative;<br>
    }<br>

    .header {<br>
        height: 50px;<br>
        background-color: #ccc;<br>
    }<br>

    .content {<br>
        height: calc(100% - 100px);<br>
        background-color: #fff;<br>
    }<br>

    .footer {<br>
        position: absolute;<br>
        bottom: 0;<br>
        width: 100%;<br>
        height: 50px;<br>
        background-color: #333;<br>
    }<br> 

在这个例子中，我们给 .wrapper 设置了一个高度为 100% ，并将其定位为相对定位。然后我们分别给 .header 和 .footer 设置了一个固定的高度，并将 .content 的高度设置为总高度减去 header 和 footer 的高度，这样就能保证 content 元素的高度恰好是剩下的部分。
这里我们还将 .footer 定位为绝对定位，并设置位置 bottom：0 来确保它始终处于页面的底部。
总结：
为了避免底部的 div 被覆盖，我们可以使用 CSS 中的 position 属性来控制元素的位置。同时，为父元素设置固定高度，使其元素高度布满整个屏幕，也有助于解决此问题。