Je fais un pied de page pour mon site Web. Le problème est que mon pied de page montre ces énormes espaces blancs, j'ai essayé de mettre un fond blanc pour le cacher mais le client veut un fond gris dans le pied de page, donc je ne peux plus vraiment cacher l'erreur. Une idée comment puis-je le réparer? J'utilise Bootstrap avec Vue JS.

<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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>
<div>
    
    <div class="container">
        <div class="row">
            <div class="column">
                <a href="#"><img src="" alt="BCV" style="width:75%"></a>
            </div>
            <div class="column">
                <a href="#"><img src="" alt="BDV"></a>
            </div>
            <div class="column">
                <a href="#" alt="SN"></a>
            </div>
            <div class="column">
                <a href="#"><img src="" alt="CVV"></a>
            </div>
        </div>
        </div>
    <br><br>

    <div class="container container-mine">
        <!-- Footer -->
        <footer class="page-footer font-small indigo">

            <!-- Footer Links -->
            <div class="container text-center text-md-left">

                <!-- Grid row -->
                <div class="row">

                    <!-- Grid column -->
                    <div class="col-md-3 mx-auto">

                        <!-- Links -->
                        <h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine" style="color:black">About</h5>
                        <ul class="list-unstyled text-center">
                            <li>
                                <a href="#" style="color:black">Team</a>
                            </li>
                            <li>
                                <a href="#" style="color:black">Equipo</a>
                            </li>
                            <li>
                                <a @click="faq" style="color:black">FAQ</a>
                            </li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                    <hr class="clearfix w-100 d-md-none">

                    <!-- Grid column -->
                    <div class="col-md-3 mx-auto">

                        <!-- Links -->
                        <h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine" style="color:black">Fondos</h5>
                        <ul class="list-unstyled text-center">
                            <li>
                                <a href="#!" style="color:black">Background</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">1</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">2</a>
                            </li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                    <hr class="clearfix w-100 d-md-none">

                    <!-- Grid column -->
                    <div class="col-md-3 mx-auto">

                        <!-- Links -->
                        <h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine" style="color:black">Services</h5>
                        <ul class="list-unstyled text-center">
                            <li>
                                <a href="#!" style="color:black">E.I.C</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">A.F</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">E.S</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">I.F</a>
                            </li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                    <hr class="clearfix w-100 d-md-none">

                    <!-- Grid column -->
                    <div class="col-md-3 mx-auto">

                        <!-- Links -->
                        <h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine" style="color:black">Reports</h5>

                        <ul class="list-unstyled text-center">

                            <li>
                                <a href="#!" style="color:black">Weekly</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">Monthly</a>
                            </li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                </div>
                <!-- Grid row -->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3" style="color:black">0800-123456
                <p>US</p>
            </div>


            <div class="footer-copyright text-center py-3" style="color:black">
                <div class="text-justify">
                    <small>
                    <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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p></small>
                </div>
            </div>
            <!-- Copyright -->

        </footer>
        <!-- Footer -->
        <a href=# class=scroll-to-top><i class="fa fa-angle-up" aria-hidden=true></i></a>

    </div>
</div>

<script>
export default {
    methods: {
        faq() {
            window.location = "/faq";
        }
    }
}
</script>

<style>
.list-group-footer .list-group-item {
    background-color: transparent;
    border-top-color: transparent;
    border-bottom: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    font-size: 78%;
}

.h4-mine {
    font-size: 80%;
}

.h5-mine {
    font-size: 80%;
    color: black;
}

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 25%;
  padding: -100px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 

.page-footer{
    background-color: #859da9;
}

</style>
0
FlowMafia 8 nov. 2019 à 16:44

1 réponse

Vérifiez votre élément de niveau supérieur. Ils ont par défaut un rembourrage qui n'est pas visible s'il correspond au pied de page. Vous ne pouvez savoir que lorsque vous modifiez la couleur d'arrière-plan.

0
Sudhir Roy 8 nov. 2019 à 14:16
58767767