Как заполнить мой div обертки содержимого, когда я использую фиксирование положения в нижнем колонтитуле?

Question

Привет, я был установлен фиксированный нижний колонтитул и sticky работает нормально, когда я устанавливаю поле в нижней части моего div обертки содержимого, но я хочу, чтобы обертка содержимого была полной высоты, а также я хочу исправить нижний колонтитул илипкий. я также пытался использовать поля для отступов, но перекрывал свою обертку контента для нижнего колонтитула, чтобы в нижнем колонтитуле вся ссылка не нажималась. у меня есть вложение одно изображение, что я хочу, чтобы красная область границы была частью поля, так что часть поля, которую я хочу удалить, и мой 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

Вы можете использовать этот код - нижний колонтитул исправлен и работает липко и нижний колонтитул, поэтому вся ссылка нижнего колонтитула не активируется.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        } 
        img {
            max-width: 100%;
        }
        .box {
            margin-bottom: 30px;
        }
        .box .box-content {
            padding: 50px 20px;
            border: 1px solid gray;
        }
        footer {
            position:-webkit-sticky;
            position:sticky;
            bottom:0;
            width: 100%;
            background-color: #232323;
            padding: 50px;
        }
        /*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;
        }
    </style>
</head>
<body>
    <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>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Answer 2

Поправьте меня, если я неправильно понял ваш вопрос, вы пытаетесь получить липкий нижний колонтитул, который заполнит ваш контейнер. Вы можете просто сделать это, добавив эти две строки селектора нижнего колонтитула в ваш файл CSS:

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

Обратитесь к этой статье, чтобы узнать больше:

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