修复了页脚与垂直滚动条重叠的问题

Question

页脚页脚的代码如下：<div class="wrapper">    <footer class="help1">        <div class="row help1">            <div class="container">                <div class="col span-1-of-2">                    <div class="container">                        <i class="fas fa-phone fa-3x phone-img"></i>                        <p>Contact Details: +00 0000 0000 | [phone]</p>                    </div>                </div>                <div class="col span-1-of-2 help">                    <div class="container">                        <p class="email"> <strong>Email-address</strong> :[e-mail]</p>                    </div>                </div>            </div>        </div>    </footer></div>CSS代码如下： .help1    {        background-color: black;        color:white;        position: absolute;        bottom: 0;        width: 100%;        /* Footer height */    }    .wrapper    {   height:15%;    }页脚与垂直滚动条重叠。任何帮助，将不胜感激

Answer 1

您是否正在寻找这样的解决方案。这是一个弹性盒实现示例。

body {

    margin: 0;

}

.help1 {

    background-color: black;

    color: white;

    position: relative;

    bottom: 0;

    width: 100%;

    margin-top: auto;

}

.wrapper {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}

<div class="wrapper">

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <h1>Sample Line</h1>

    <footer class="help1">

        <div class="row help1">

            <div class="container">

                <div class="col span-1-of-2">

                    <div class="container">

                        <i class="fas fa-phone fa-3x phone-img"></i>

                        <p>Contact Details: +00 0000 0000 | [phone]</p>

                    </div>

                </div>

                <div class="col span-1-of-2 help">

                    <div class="container">

                        <p class="email"> <strong>Email-address</strong> :[e-mail]</p>

                    </div>

                </div>

            </div>

        </div>

    </footer>

</div>