Footer flex

R.Titovich pro asked 5 years ago

Good afternoon, ladies and gentlemen. I have a problem with Flex blocks. In SideNav, I can't press the footer to the bottom, that's no way, no Flex classes help me. Could you tell me please, that I do not so

Proofs

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Панель управления сайта | PoliceTools</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="/design/mdb-admin/css/bootstrap.min.css">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" href="/design/mdb-admin/css/mdb.min.css">
</head>

<body class="fixed-sn mdb-skin">
<header>
    <div id="slide-out" class="side-nav sn-bg-4 fixed">
        <ul class="custom-scrollbar">
<!--            <li class="logo-sn waves-effect py-3">-->
<!--                <div class="text-center">-->
<!--                    <a href="#" class="pl-0"><img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.png"></a>-->
<!--                </div>-->
<!--            </li>-->
<!--            <li>-->
<!--                <form class="search-form" role="search">-->
<!--                    <div class="md-form mt-0 waves-light">-->
<!--                        <input type="text" class="form-control py-2" placeholder="Search">-->
<!--                    </div>-->
<!--                </form>-->
<!--            </li>-->
            <li>
                <ul class="collapsible collapsible-accordion">
                    <li><a href="/admin/" class="collapsible-header waves-effect"><i class=" fas fa-home"></i>Главная</a></li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-users"></i>Пользователи<i class="fas fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="/admin/users/" class="waves-effect">Список пользователей</a></li>
                                <li><a href="/admin/users/new/" class="waves-effect">Создать пользователя</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-users"></i>Новости<i class="fas fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="/admin/news/" class="waves-effect">Список новостей</a></li>
                                <li><a href="/admin/news/new/" class="waves-effect">Написать новость</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="sidenav-bg mask-strong"></div>
    </div>
    <nav class="navbar fixed-top navbar-expand-lg double-nav">
        <div class="float-left">
            <a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>
        </div>
        <div class="breadcrumb-dn mr-auto">
            <ul class="nav navbar-nav nav-flex-icons ml-auto">
                <li class="nav-item ml-3">
                    <a class="nav-link waves-effect" href="/"><i class="fas fa-home"></i> <span class="clearfix d-none d-sm-inline-block">На сайт</span></a>
                </li>
            </ul>
        </div>
        <ul class="nav navbar-nav nav-flex-icons ml-auto">
            <li class="nav-item">
                <a class="nav-link waves-effect"><i class="far fa-comments"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
            </li>
<!--            <li class="nav-item dropdown">-->
<!--                <a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown"-->
<!--                   aria-haspopup="true" aria-expanded="false">-->
<!--                    <i class="fas fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>-->
<!--                </a>-->
<!--                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">-->
<!--                    <a class="dropdown-item" href="#">Log Out</a>-->
<!--                    <a class="dropdown-item" href="#">My account</a>-->
<!--                </div>-->
<!--            </li>-->
        </ul>
    </nav>
</header>
<main class="mt-5 pt-5">
    <div class="container-fluid">

    </div>
</main>
    <footer class="page-footer mdb mt-5">
        <div class="footer-copyright py-3 text-center">
            <strong><i class="far fa-copyright copyright"></i> <a href="https://policetools.ru/">PoliceTools Team</a> & <a href="https://www.roffdaniel.com/">ЯD</a>, 2017-<? echo date("Y"); ?>
        </div>
    </footer>
<script src="/design/mdb-admin/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/design/mdb-admin/js/popper.min.js"></script>
<script type="text/javascript" src="/design/mdb-admin/js/bootstrap.js"></script>
<script type="text/javascript" src="/design/mdb-admin/js/mdb.min.js"></script>
<script>
    // SideNav Initialization
    $(".button-collapse").sideNav();

    var container = document.querySelector('.custom-scrollbar');
    var ps = new PerfectScrollbar(container, {
        wheelSpeed: 2,
        wheelPropagation: true,
        minScrollbarLength: 20
    });
</script>
</body>
</html>

Bartłomiej Malanowski staff pro premium answered 5 years ago

I think my fiddle will help you


R.Titovich pro commented 5 years ago

Omg.... Thank you very mach!


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: Notebook
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags