如何修复最后一个 p 元素在位置固定的元素容器下方？

Question

我有一个 problem.i 希望最后一段是 clear.in 我的代码最后一段在 div 下方，位置固定并且从未显示。 div 和 class btn__container 有固定的位置和 bottom=0.so 这个元素总是粘在 page.i 的底部想知道我怎么能看到最后一个我页面中的元素。

这是我的 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>

Answer 1

你必须使用 padding bottom 固定多少 div 高度你必须提到主标签它会工作它的简单代码尝试下面的代码我已经使用 70px 你可以给你固定 div身高

main{
    padding-bottom:70px
  }

如何修复最后一个 p 元素在位置固定的元素容器下方？

How fix the last p element goes below an element container with position fixed?

html

javascript

css

styles

css-position