Блог

Главная - Вопросы по программированию - Нижний колонтитул остается в верхней части содержимого — Bootstrap 4 (ASP.NET Мастер/Ребенок)

Нижний колонтитул остается в верхней части содержимого — Bootstrap 4 (ASP.NET Мастер/Ребенок)

#asp.net #bootstrap-4

#asp.net #начальная загрузка-4

Вопрос:

У меня возникли проблемы с Bootstrap 4 и Internet Explorer. Я использую ASP.NET основные / дочерние формы. Это касается нижнего колонтитула, который всегда находится внизу страниц. Когда содержимое короткое, нижний колонтитул будет перемещен в нижнюю часть страницы; когда содержимое длиннее, область можно прокручивать, а нижний колонтитул будет внизу содержимого. Итак, это было реализовано с использованием flexbox в CSS и установкой тегов HTML и body на 100% высоты. Все работает нормально во всех браузерах, за исключением того, что он не работает для Internet Explorer только на небольших устройствах; когда я уменьшаю его до ширины мобильного устройства, нижний колонтитул останется в середине верхней части страницы содержимого. В Chrome, Firefox и Edge все работает нормально, а нижний колонтитул находится внизу страницы даже для небольших устройств.

HTML-код:

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MIMO.master.cs" Inherits="MIMO_WEB_R03.MIMO" %>

<!DOCTYPE html>

<html class="h-100">
 
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap.mod.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.0.0.js"></script>
    <script src="Scripts/bootstrap.mod.js"></script> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S oqd12jhcu A56Ebc1zFSJ" crossorigin="anonymous">

</head>

<body class="d-flex flex-column h-100">    
    <div class="container-fluid bg-success">
        <div class="container">
           
                    <nav class="navbar navbar-expand-sm bg-success navbar-dark" 
                    role="navigation">
            MENU ITEMS AND COLLAPSE BUTTON
                    </nav>
            </div>
    </div>
     <div class="jumbotron p-2 m-0"><div class="container text-center align-items-center">
    <h3 class="text-warning font-weight-bold" id="heading">SOME TITLE HERE</h3>
    </div>

        <div class="container d-flex align-items-end">
        LINKS TO PAGES HERE
        </div>
     </div>

            <asp:ContentPlaceHolder ID="Body" runat="server">
        <div id = "page-content">
            PAGE CONTENT DIV IS SPECIFIED AT CHILD PAGES        
        </div>

            </asp:ContentPlaceHolder>

    <footer class="footer bg-success small">

        <!-- Footer Links -->
        <div class="container">
        <div class="row">
            <div class="col-md-4 p-4 text-left flex-column">
                    CONTENT
            </div>
            <div class="col-md-4 p-4 text-center">
            CONTENT

            </div>
            <div class="col-md-4 p-4 d-flex flex-column justify-content-center">

                    LINKS  
                </div>
            </div>
        </div>
    </footer>
    <!-- END FOOTER SECTION -->
</body>

</html>

CSS

 /* CSS TO KEEP FOOTER ALWAYS ON BOTTOM USIN FLEXBOX */

footer {

    flex-shrink: 0;
}

#page-content 
{
    flex: 1 0 auto;
    width: 80%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    #page-content {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    #page-content {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    #page-content {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    #page-content {
        max-width: 1140px;
    }
}