Je travaille avec ASP.NET Core 3.1 MVC et Bootstrap 4.4.1 et le modèle de projet par défaut avec DataTables.js (1.10.20 et css twitter bootstrap).

La première chose que je dois dire, c'est que je ne suis pas bon du tout avec CSS, donc je pense que cela pourrait être la raison de ce problème.

Le problème suivant se produit lorsque l'écran a une résolution inférieure: (Résolution testée: 400x500)

Footer behind pagination

Je voudrais savoir pourquoi cela s'est produit avec le pied de page fixe et s'il existe un correctif pour cela.

Merci d'avance pour toute aide.

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebApplication1</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />      <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand">WebApplication1</a>
            </div>
        </nav>
    </header>

    <div class="container">
        <main role="main" class="pb-3">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />

<div class="table-responsive p-1">
    <table class="table table-striped table-bordered" id="Table">
        <thead>
            <tr>
                <th scope="col">
                    Name
                </th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td class="align-middle">
                        Hello
                    </td>
                </tr>
                <tr>
                    <td class="align-middle">
                        World
                    </td>
                </tr>
        </tbody>
    </table>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#Table').DataTable(
                    {
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
                        }
                    });
                    
            });</script>
</div>
        </main>

    </div>
            <footer class="border-top footer text-muted text-center">
    <div class="container">
        Footer
    </div>
</footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js"></script>
    </body>
</html>
0
Andrés Quesada Cascante 18 avril 2020 à 07:39

4 réponses

Meilleure réponse

J'ai utilisé CSS flex pour réduire la modification de votre balisage.

Le changement que j'ai fait a été:

  1. J'ai ajouté la classe content à votre contenu principal.
  2. J'ai changé le style de body pour avoir ces styles
body {
   display: flex;
   flex-direction: column;
   height: 100vh;
}
  1. Ensuite, je les ai ajoutés et j'ai également mis à jour le style de votre .footer
header {
  flex: 0 0 50px;
}
.content {
  flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    width: 100%;
    line-height: 60px; /* Vertically center the text there */
}
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: 0 0 50px;
}
.content {
  flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    width: 100%;
    line-height: 60px; /* Vertically center the text there */
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand">WebApplication1</a>
            </div>
        </nav>
    </header>
    <div class="content container">
        <main role="main" class="pb-3">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />

<div class="table-responsive p-1">
    <table class="table table-striped table-bordered" id="Table">
        <thead>
            <tr>
                <th scope="col">
                    Name
                </th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td class="align-middle">
                        Hello
                    </td>
                </tr>
                <tr>
                    <td class="align-middle">
                        World
                    </td>
                </tr>
        </tbody>
    </table>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#Table').DataTable(
                    {
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
                        }
                    });
                    
            });</script>
</div>
        </main>

    </div>
    <footer class="footer border-top footer text-muted text-center">
        <div class="container">
            Footer
        </div>
    </footer>
</body>

Vous pouvez le voir fonctionner ici: https://jsfiddle.net/8ba9cdxe/

1
Frank Fajardo 23 avril 2020 à 01:52

J'ai utilisé CSS flex pour réduire la modification de votre balisage:

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: 0 0 50px;
}
.content {
  flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    width: 100%;
    line-height: 60px; /* Vertically center the text there */
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand">WebApplication1</a>
            </div>
        </nav>
    </header>
    <div class="content container">
        <main role="main" class="pb-3">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />

<div class="table-responsive p-1">
    <table class="table table-striped table-bordered" id="Table">
        <thead>
            <tr>
                <th scope="col">
                    Name
                </th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td class="align-middle">
                        Hello
                    </td>
                </tr>
                <tr>
                    <td class="align-middle">
                        World
                    </td>
                </tr>
        </tbody>
    </table>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#Table').DataTable(
                    {
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
                        }
                    });
                    
            });</script>
</div>
        </main>

    </div>
    <footer class="footer border-top footer text-muted text-center">
        <div class="container">
            Footer
        </div>
    </footer>
</body>

Vous pouvez jouer avec lui sur ce violon

0
Frank Fajardo 18 avril 2020 à 06:51

Vous pouvez changer la position du pied de page en statique puis il sera corrigé.

0
zekeriya kocairi 18 avril 2020 à 05:54

Essayez de supprimer la position: absolue dans la classe de pied de page

.footer {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}
0
Phong Nguyễn 18 avril 2020 à 06:04