如何修复最后一个 p 元素低于位置固定的元素容器？答案

【问题标题】：How fix the last p element goes below an element container with position fixed?如何修复最后一个 p 元素低于位置固定的元素容器？
【发布时间】：2021-06-28 04:22:58
【问题描述】：

我有一个问题。我希望最后一段清楚。在我的代码中，最后一段位于 div 的下方，位置固定，并且从未显示。具有类 btn__container 的 div 的位置是固定的，底部 = 0。所以这个元素总是粘在页面的底部。我想知道如何才能看到页面中的最后一个元素。

这是我的html和css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Roboto, sans-serif;
    background-color: #eee;
    direction: ltr;
}

main {
    padding: 15px;
}

h1 {
    text-align: center;
}

p {
    margin-top: 20px;
    text-align: justify;
}

.card__container {
    display: flex;
}

.card {
    background-color: deepskyblue;
    color: #eee;
    padding: 15px;
    border-radius: 10px;
    flex: 0 0 40%;
    margin-top: 20px;
    margin-left: 10px;
}

.card > p {
    text-align: start;
}

.btn__container {
    width: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background-color: lightgrey;
    padding: 10px 0;
}
button{
    border: 0;
    outline: none;
    color: #eee;
    background-color: deepskyblue;
    padding: 10px 0;
    flex: 0 0 30%;
    border-radius: 10px;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<main>
    <h1>This is a test page</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda doloremque enim nulla perferendis praesentium
        quos temporibus voluptas voluptatem? Error, illum.</p>
    <div class="card__container">
        <div class="card">
            <h2>Card Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
                similique!</p>
        </div>
        <div class="card">
            <h2>Card Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
                similique!</p>
        </div>
     <div class="card">
            <h2>Card Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
                similique!</p>
        </div>
     <div class="card">
            <h2>Card Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
                similique!</p>
        </div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut dignissimos doloremque esse impedit ipsam
        itaque molestias obcaecati officia pariatur placeat praesentium quis rem rerum sit unde, vel vero?
        Similique.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, expedita?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque eius enim impedit laboriosam officiis
        possimus repellendus sed tempore, voluptates voluptatibus. Adipisci at ea possimus? Architecto autem,
        consequatur culpa cumque earum eligendi illo in maxime, minus nam neque perferendis placeat quasi rerum
        voluptas? Alias est facilis natus quis tempora totam ut!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi facere unde. Eaque est quidem
        quisquam quos repellendus tempora ut.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsa laudantium omnis reiciendis repellendus
        repudiandae sed sit! Ad animi maiores nulla tempora ullam voluptas?</p>

    <div class="btn__container">
        <button>Cancel</button>
        <button>More</button>
    </div>
</main>
</body>
</html>

【问题讨论】：

标签： javascript html css styles css-position

【解决方案1】：

你必须使用填充底部来获得多少固定 div 高度你必须为主标签提到多少它会工作它的简单代码尝试下面的代码我使用了 70px 你可以给你的固定 div 高度

main{
    padding-bottom:70px
  }

【讨论】：