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

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 {&nbsp; &nbsp; margin: 0;}.help1 {&nbsp; &nbsp; background-color: black;&nbsp; &nbsp; color: white;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin-top: auto;}.wrapper {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; min-height: 100vh;}<div class="wrapper">&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <h1>Sample Line</h1>&nbsp; &nbsp; <footer class="help1">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row help1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col span-1-of-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-phone fa-3x phone-img"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Contact Details: +00 0000 0000 | [phone]</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col span-1-of-2 help">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="email"> <strong>Email-address</strong> :[e-mail]</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </footer></div>