html - 当我在页脚中使用位置固定时如何填充我的内容包装器 div？

Question

你好，当我设置内容包装器 div 的边距底部时，我设置了footer fixed 和 sticky 工作正常，但我希望内容包装器是全高的，我也想要页脚固定和粘性。我也尝试使用边距填充，但将我的内容包装器重叠到页脚，因此页脚所有链接都不可点击。我有一张图片附件，我想要的红色边框区域是边距部分，以便我要删除的边距部分和我的内容包装器 div 是全高。

提前致谢。

img {
                max-width: 100%;
            }
            .box {
                margin-bottom: 30px;
            }
            .box .box-content {
                padding: 50px 20px;
                border: 1px solid gray;
            }
            footer {
                position: fixed;
                padding: 50px;
                background-color: #232323;
                z-index: -1;
                bottom: 0;
                width: 100%;
            }
            footer ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            footer ul li a {
                text-decoration: none;
                color: #fff;
            }
            footer ul li a:hover {
                text-decoration: none;
                color: blueviolet;
            }
            .content-wrapper {
                margin-bottom: 196px;
                position: relative;
                background-color: #fff;
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="p-5 content-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 box text-center">
                        <a href="#"><img src="http://placekitten.com/1000/1000" alt="" /></a>
                        <div class="box-content">
                            <h5 class="mb-3">Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                            <button type="button" class="btn btn-warning">Submit</button>
                        </div>
                    </div>
                    <div class="col-md-4 box text-center">
                        <a href="#"><img src="http://placekitten.com/1000/1000" alt="" /></a>
                        <div class="box-content">
                            <h5 class="mb-3">Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                            <button type="button" class="btn btn-warning">Submit</button>
                        </div>
                    </div>
                    <div class="col-md-4 box text-center">
                        <a href="#"><img src="http://placekitten.com/1000/1000" alt="" /></a>
                        <div class="box-content">
                            <h5 class="mb-3">Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                            <button type="button" class="btn btn-warning">Submit</button>
                        </div>
                    </div>
                    <div class="col-md-4 box text-center">
                        <a href="#"><img src="http://placekitten.com/1000/1000" alt="" /></a>
                        <div class="box-content">
                            <h5 class="mb-3">Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                            <button type="button" class="btn btn-warning">Submit</button>
                        </div>
                    </div>
                    <div class="col-md-4 box text-center">
                        <a href="#"><img src="http://placekitten.com/1000/1000" alt="" /></a>
                        <div class="box-content">
                            <h5 class="mb-3">Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                            <button type="button" class="btn btn-warning">Submit</button>
                        </div>
                    </div>
                    <div class="col-md-4 box text-center">
                        <a href="#"><img src="http://placekitten.com/1000/1000" alt="" /></a>
                        <div class="box-content">
                            <h5 class="mb-3">Lorem ipsum, or lips u m as it i s sometimes fs fsdf</h5>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                            <button type="button" class="btn btn-warning">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2">
                        <ul>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <ul>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <ul>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <ul>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <ul>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <ul>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                            <li><a href="#">Lorem ipsum, or lips</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>

Answer 1

如果我误解了您的问题，请纠正我，您正在尝试使用一个粘性页脚来填充您的容器。您只需在 CSS 文件中添加这两行页脚选择器即可:

footer {
    position: 'sticky';
    height: '100vh';
}

想了解更多请引用这篇文章:

https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46