html - 如何制作粘性页眉、页脚和侧边栏？

标签 html jquery css bootstrap-4

我有当前可用的模板，但我想进行一些调整。当前代码滚动整个内容。我希望页眉和页脚能够固定/粘性。当用户滚动时，内容页眉和页脚应该可见。最后一 block 是侧边栏菜单。该内容在当前代码中在页面中上下滚动。我认为如果该内容也得到修复，那就更好了。唯一应该可滚动的区域应该是主容器。这是我的代码示例:

/* Resize function without multiple trigger */
(function($, sr) {
  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function(func, threshold, execAsap) {
    var timeout;

    return function debounced() {
      var obj = this,
        args = arguments;

      function delayed() {
        if (!execAsap)
          func.apply(obj, args);
        timeout = null;
      }

      if (timeout)
        clearTimeout(timeout);
      else if (execAsap)
        func.apply(obj, args);

      timeout = setTimeout(delayed, threshold || 100);
    };
  };

  // smartresize 
  jQuery.fn[sr] = function(fn) {
    return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
  };

})(jQuery, 'smartresize');

var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
  $BODY = $('body'),
  $MENU_TOGGLE = $('#menu_toggle'),
  $SIDEBAR_MENU = $('#sidebar-menu'),
  $SIDEBAR_FOOTER = $('.sidebar-footer'),
  $LEFT_COL = $('.left_col'),
  $RIGHT_COL = $('.right_col'),
  $NAV_MENU = $('.nav_menu'),
  $FOOTER = $('footer');

// Sidebar
function init_sidebar() {
  // TODO: This is some kind of easy fix, maybe we can improve this
  var setContentHeight = function() {
    // reset height
    $RIGHT_COL.css('min-height', $(window).height());

    var bodyHeight = $BODY.outerHeight(),
      footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
      leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
      contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

    // normalize content
    contentHeight -= $NAV_MENU.height() + footerHeight;

    $RIGHT_COL.css('min-height', contentHeight);
  };

  var openUpMenu = function() {
    $SIDEBAR_MENU.find('li').removeClass('active active-sm');
    $SIDEBAR_MENU.find('li ul').slideUp();
  }

  $SIDEBAR_MENU.find('a').on('click', function(ev) {
    var $li = $(this).parent();

    if ($li.is('.active')) {
      $li.removeClass('active active-sm');
      $('ul:first', $li).slideUp(function() {
        setContentHeight();
      });
    } else {
      // prevent closing menu if we are on child menu
      if (!$li.parent().is('.child_menu')) {
        openUpMenu();
      } else {
        if ($BODY.is('nav-sm')) {
          if (!$li.parent().is('child_menu')) {
            openUpMenu();
          }
        }
      }

      $li.addClass('active');

      $('ul:first', $li).slideDown(function() {
        setContentHeight();
      });
    }
  });

  // toggle small or large menu
  $MENU_TOGGLE.on('click', function() {
    if ($BODY.hasClass('nav-md')) {
      $SIDEBAR_MENU.find('li.active ul').hide();
      $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
    } else {
      $SIDEBAR_MENU.find('li.active-sm ul').show();
      $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
    }

    $BODY.toggleClass('nav-md nav-sm');

    setContentHeight();
  });

  // check active menu
  $SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page');

  $SIDEBAR_MENU.find('a').filter(function() {
    return this.href == CURRENT_URL;
  }).parent('li').addClass('current-page').parents('ul').slideDown(function() {
    setContentHeight();
  }).parent().addClass('active');

  // recompute content when resizing
  $(window).smartresize(function() {
    setContentHeight();
  });

  setContentHeight();

  // fixed sidebar
  if ($.fn.mCustomScrollbar) {
    $('.menu_fixed').mCustomScrollbar({
      autoHideScrollbar: true,
      theme: 'minimal',
      mouseWheel: {
        preventDefault: true
      }
    });
  }
}
// /Sidebar

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  init_sidebar();
});
.left_col { background: #2A3F54; }
.nav-sm .container.body .col-md-3.left_col { min-height: 100%; width: 70px; padding: 0; z-index: 9999; position: absolute; }
.nav-sm .container.body .col-md-3.left_col.menu_fixed {position: fixed; height: 100%;}
.nav-sm .container.body .col-md-3.left_col .mCSB_container,
.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox { overflow: visible; }
.nav-sm .hidden-small { visibility: hidden; }
.nav-sm .container.body .right_col { padding: 10px 20px; margin-left: 70px; z-index: 2;}
.nav-sm .navbar.nav_title { width: 70px;}
.nav-sm .navbar.nav_title a span { display: none;}
.nav-sm .navbar.nav_title a i {font-size: 27px;margin: 13px 0 0 3px;}
.site_title i {  border: 1px solid #EAEAEA; padding: 5px 6px; border-radius: 50%;}
.nav-sm .main_container .top_nav {display: block; margin-left: 70px; z-index: 2;}
.nav-sm .nav.side-menu li a {text-align: center !important; font-weight: 400; font-size: 10px; padding: 10px 5px;}
.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {border-right: 5px solid #1ABB9C;}
.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {position: static; width: 200px;background: none;}
.nav-sm>.nav.side-menu>li.active-sm>a {color: #1ABB9C !important;}
.nav-sm .nav.side-menu li a i.toggle-up {display: none !important;}
.nav-sm .nav.side-menu li a i {font-size: 25px !important; text-align: center;width: 100% !important; margin-bottom: 5px;}
.nav-sm ul.nav.child_menu { left: 100%;  position: absolute; top: 0;width: 210px;z-index: 4000; background: #3E5367;display: none;}
.nav-sm ul.nav.child_menu li {padding: 0 10px;}
.nav-sm ul.nav.child_menu li a { text-align: left !important;}
.menu_section h3 { padding-top: 5px;padding-bottom: 5px;padding-left: 23px;color: #fff; background-color: rgba(255, 255, 255, 0.06); text-transform: uppercase;letter-spacing: .5px; font-weight: bold;font-size: 11px;  margin-bottom: 0;  margin-top: 0;  text-shadow: 1px 1px #000;}
.menu_section>ul {margin-top: 5px;display: block;}
.main_menu span.fa {float: right;text-align: center;margin-top: 5px;font-size: 10px;min-width: inherit;color: #C4CFDA;}
.active a span.fa {text-align: right !important;margin-right: 4px;}
.nav-sm .menu_section {margin: 0;}
.nav-sm span.fa,
.nav-sm .menu_section h3 {display: none;}
.nav-sm li li span.fa {display: inline-block;}
.nav_menu {float: left;background: #EDEDED;border-bottom: 1px solid #D9DEE4;margin-bottom: 10px;width: 100%;position: relative;}
@media (min-width: 480px) {
  .nav_menu {position: static;}
  .item {display: block;}
}
.nav-md .container.body .col-md-3.left_col {min-height: 100%;width: 230px;padding: 0;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;z-index: 1;}
.nav-md .container.body .col-md-3.left_col.menu_fixed {height: 100%;position: fixed;}
body .container.body .right_col {background: #F7F7F7;}
.nav-md .container.body .right_col {padding: 10px 20px 0;margin-left: 230px;}
.nav_title {width: 230px;float: left;background: #2A3F54;border-radius: 0;height: 57px;padding: 0px;}
@media (max-width: 991px) {
  .nav-md .container.body .right_col,
  .nav-md .container.body .top_nav {width: 100%;margin: 0;}
  .nav-md .container.body .col-md-3.left_col {display: none;}
  .nav-md .container.body .right_col {width: 100%;padding-right: 0;}
  .right_col {padding: 10px !important;}
  .item {display: block;}
}

.container {width: 100%;padding: 0;max-width: 100%;}
.navbar-nav>li>a,
.navbar-brand,
.navbar-nav>li>a {color: #fff !important;}
body {color: #73879C;background: #2A3F54;font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;font-size: 13px;font-weight: 400;line-height: 1.471;}
.main_container .top_nav {display: block;margin-left: 230px;}
.main_content {padding: 10px 20px;}
h1,.h1,h2,.h2,h3,.h3 {margin-top: 10px; margin-bottom: 10px;}
a {color: #5A738E;text-decoration: none;}
a,a:visited,a:focus,a:active,
 :visited, :focus, :active,
.btn:focus,.btn:active:focus,
.btn.active:focus,.btn.focus,
.btn:active.focus,.btn.active.focus {outline: 0;}
a:hover,
a:focus {
  text-decoration: none;
}
.navbar {
  margin-bottom: 0;
}

.navbar-header {
  background: #34495E;
}

.navbar-right {
  margin-right: 0;
}

.top_nav .navbar-right {
  margin: 13px;
  width: auto;
  float: right;
}

.top_nav .navbar-right li {
  display: inline-block;
  float: right;
  position: static;
}

@media (min-width: 480px) {
  .top_nav .navbar-right li {
    position: relative;
  }
  .item {
    display: block;
  }
}

.top_nav .dropdown-menu li {
  width: 100%;
}

.dropdown-item {
  width: 100%;
  padding: 12px 20px;
}

.top_nav li a i {
  font-size: 15px;
}

.navbar-static-top {
  position: fixed;
  top: 0;
  width: 100%;
}

.sidebar-header {
  border-bottom: 0;
  margin-top: 46px;
}

.sidebar-header:first-of-type {
  margin-top: 0;
}

.nav>li {
  position: relative;
  display: block;
}

.nav.side-menu>li {
  position: relative;
  display: block;
  cursor: pointer;
}

.nav.side-menu>li>a {
  margin-bottom: 6px;
}

.nav.side-menu>li>a:hover {
  color: #F2F5F7 !important;
}

.nav.side-menu>li>a:hover,
.nav>li>a:focus {
  text-decoration: none;
  background: transparent;
}

.nav.child_menu {
  display: none;
}

.nav.child_menu li:hover,
.nav.child_menu li.active {
  background-color: rgba(255, 255, 255, 0.06);
}

.nav.child_menu li {
  padding-left: 36px;
}

.nav-md ul.nav.child_menu li:before {
  background: #425668;
  bottom: auto;
  content: "";
  height: 8px;
  left: 23px;
  margin-top: 15px;
  position: absolute;
  right: auto;
  width: 8px;
  z-index: 1;
  border-radius: 50%;
}

.nav-md ul.nav.child_menu li:after {
  border-left: 1px solid #425668;
  bottom: 0;
  content: "";
  left: 27px;
  position: absolute;
  top: 0;
}

.nav-md ul.nav.child_menu li:last-child::after {
  bottom: 50%;
}

.nav.side-menu>li>a,
.nav.child_menu>li>a {
  color: #E7E7E7;
  font-weight: 500;
}

.nav.child_menu li li:hover,
.nav.child_menu li li.active {
  background: none;
}

.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
  color: #fff;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 13px 15px 12px;
}

.nav.side-menu>li.current-page,
.nav.side-menu>li.active {
  border-right: 5px solid #1ABB9C;
}

.nav li.current-page {
  background: rgba(255, 255, 255, 0.05);
}

.nav li li li.current-page {
  background: none;
}

.nav li li.current-page a {
  color: #fff;
}

.nav.side-menu>li.active>a {
  text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#334556), to(#2C4257)), #2A3F54;
  background: linear-gradient(#334556, #2C4257), #2A3F54;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
}

.navbar-brand,
.navbar-nav>li>a {
  font-weight: 500;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 32px;
}

.site_title {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 22px;
  width: 100%;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 59px;
  display: block;
  height: 55px;
  margin: 0;
  padding-left: 10px;
}

.site_title:hover,
.site_title:focus {
  text-decoration: none;
}

.nav.navbar-nav>li>a {
  color: #515356 !important;
}

.nav.top_menu>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #34495E !important;
}

.nav>li>a:hover,
.nav>li>a:focus {
  background-color: transparent;
}

.toggle {
  float: left;
  margin: 0;
  width: 70px;
}

.toggle a {
  padding: 15px 15px 0;
  margin: 0;
  cursor: pointer;
}

.toggle a i {
  font-size: 26px;
}

.nav.child_menu>li>a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  padding: 9px;
}

.main_menu_side {
  padding: 0;
}

.bs-docs-sidebar .nav>li>a {
  display: block;
  padding: 4px 6px;
}

footer {
  background: #fff;
  padding: 10px 20px;
  display: block;
}

.nav-sm footer {
  margin-left: 70px;
}

.footer_fixed footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
}

@media (min-width: 768px) {
  .footer_fixed footer {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .footer_fixed .nav-sm footer {
    margin-left: 0;
  }
}

.dropdown-menu {
  border: medium none;
  -webkit-box-shadow: none;
  box-shadow: none;
  display: none;
  float: left;
  font-size: 12px;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 9998;
  border: 1px solid #D9DEE4;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-menu>li>a {
  color: #5A738E;
}

.navbar-nav .open .dropdown-menu {
  position: absolute;
  background: #fff;
  margin-top: 0;
  border: 1px solid #D9DEE4;
  -webkit-box-shadow: none;
  right: 0;
  left: auto;
  width: 220px;
}

.navbar-nav .open .dropdown-menu.msg_list {
  width: 300px !important;
}

.sidebar-footer {
  bottom: 0px;
  clear: both;
  display: block;
  padding: 5px 0 0 0;
  position: fixed;
  width: 230px;
  background: #2A3F54;
}

.sidebar-footer a {
  padding: 7px 0 3px;
  text-align: center;
  width: 25%;
  font-size: 17px;
  display: block;
  float: left;
  background: #172D44;
}

.sidebar-footer a:hover {
  background: #425567;
}

a.user-profile {
  color: #5E6974 !important;
}

.user-profile img {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  margin-right: 10px;
}

.main_menu .fa {
  width: 26px;
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="images/favicon.ico" type="image/ico" />
  <title>Single Page Application</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562238233825" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <!-- Font Awesome -->
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body class="nav-md">
  <div class="container body">
    <div class="main_container">
      <div class="col-md-3 left_col">
        <div class="left_col scroll-view">
          <div class="navbar nav_title" style="border: 0;">
            <a href="#" class="site_title"><i class="fa fa-paw"></i> SPA</a>
          </div>
          <div class="clearfix"></div>
          <!-- sidebar menu -->
          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
              <h3>General</h3>
              <ul class="nav side-menu">
                <li>
                  <a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="index.html">Dashboard</a></li>
                    <li><a href="#">Dashboard2</a></li>
                    <li><a href="#">Dashboard3</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">General Form</a></li>
                    <li><a href="#">Advanced Components</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">General Elements</a></li>
                    <li><a href="#">Media Gallery</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">Tables</a></li>
                    <li><a href="#">Table Dynamic</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">Chart JS</a></li>
                    <li><a href="#">Chart JS2</a></li>
                    <li><a href="#">Moris JS</a></li>
                    <li><a href="#">ECharts</a></li>
                    <li><a href="#">Other Charts</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">Fixed Sidebar</a></li>
                    <li><a href="#">Fixed Footer</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="menu_section">
              <h3>Live On</h3>
              <ul class="nav side-menu">
                <li>
                  <a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">E-commerce</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Project Detail</a></li>
                    <li><a href="#">Contacts</a></li>
                    <li><a href="#">Profile</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">403 Error</a></li>
                    <li><a href="#">404 Error</a></li>
                    <li><a href="#">500 Error</a></li>
                    <li><a href="#">Plain Page</a></li>
                    <li><a href="#">Login Page</a></li>
                    <li><a href="#">Pricing Tables</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#level1_1">Level One</a></li>
                    <li>
                      <a>Level One<span class="fa fa-chevron-down"></span></a>
                      <ul class="nav child_menu">
                        <li class="sub_menu"><a href="level2.html">Level Two</a>
                        </li>
                        <li><a href="#level2_1">Level Two</a>
                        </li>
                        <li><a href="#level2_2">Level Two</a>
                        </li>
                      </ul>
                    </li>
                    <li><a href="#level1_2">Level One</a></li>
                  </ul>
                </li>
                <li><a href="#"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
              </ul>
            </div>
          </div>
          <!-- /sidebar menu -->

          <!-- /menu footer buttons -->
          <div class="sidebar-footer hidden-small">
            <a data-toggle="tooltip" data-placement="top" title="Settings" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a>
            <a data-toggle="tooltip" data-placement="top" title="FullScreen" href="#"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a>
            <a data-toggle="tooltip" data-placement="top" title="Lock" href="#"><i class="fa fa-lock" aria-hidden="true"></i></a>
            <a data-toggle="tooltip" data-placement="top" title="Logout" href="#"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
          </div>
          <!-- /menu footer buttons -->
        </div>
      </div>

      <!-- Header: top navigation -->
      <header>
        <div class="top_nav">
          <div class="nav_menu">
            <div class="nav toggle">
              <a id="menu_toggle"><i class="fa fa-bars"></i></a>
            </div>
            <nav class="nav navbar-nav">
              <ul class=" navbar-right">
                <li class="nav-item dropdown open" style="padding-left: 15px;">
                  <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
                    <img src="images/img.jpg" alt="">John Doe
                  </a>
                  <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="javascript:;">Profile</a>
                    <a class="dropdown-item" href="javascript:;">
                      <span class="badge bg-danger pull-right">50%</span>
                      <span>Settings</span>
                    </a>
                    <a class="dropdown-item" href="javascript:;">Help</a>
                    <a class="dropdown-item" href="#"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
                  </div>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </header>
      <!-- Header: top navigation -->

      <!-- Main: page content -->
      <div class="right_col" role="main">
        <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Secondary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <div class="card text-white bg-success mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Success card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Danger card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Warning card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
      <!-- Main: page content -->

      <!-- Footer: content -->
      <footer>
        <div class="pull-right">Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a></div>
        <div class="clearfix"></div>
      </footer>
      <!-- Footer: content -->
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89a97978c8b8c8a9988b8ccd6cdd6cb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

如果有人知道调整代码并获得所需行为的简单方法，请告诉我。谢谢。

最佳答案

有必要吗？

/* Resize function without multiple trigger */
(function($, sr) {
  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function(func, threshold, execAsap) {
    var timeout;

    return function debounced() {
      var obj = this,
        args = arguments;

      function delayed() {
        if (!execAsap)
          func.apply(obj, args);
        timeout = null;
      }

      if (timeout)
        clearTimeout(timeout);
      else if (execAsap)
        func.apply(obj, args);

      timeout = setTimeout(delayed, threshold || 100);
    };
  };

  // smartresize 
  jQuery.fn[sr] = function(fn) {
    return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
  };

})(jQuery, 'smartresize');

var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
  $BODY = $('body'),
  $MENU_TOGGLE = $('#menu_toggle'),
  $SIDEBAR_MENU = $('#sidebar-menu'),
  $SIDEBAR_FOOTER = $('.sidebar-footer'),
  $LEFT_COL = $('.left_col'),
  $RIGHT_COL = $('.right_col'),
  $NAV_MENU = $('.nav_menu'),
  $FOOTER = $('footer');

// Sidebar
function init_sidebar() {
  // TODO: This is some kind of easy fix, maybe we can improve this
  var setContentHeight = function() {
    // reset height
    //$RIGHT_COL.css('min-height', $(window).height());

   /* var bodyHeight = $BODY.outerHeight(),
      footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
      leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
      contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

    // normalize content
    contentHeight -= $NAV_MENU.height() + footerHeight;

    $RIGHT_COL.css('min-height', contentHeight);*/
  };

  var openUpMenu = function() {
    $SIDEBAR_MENU.find('li').removeClass('active active-sm');
    $SIDEBAR_MENU.find('li ul').slideUp();
  }

  $SIDEBAR_MENU.find('a').on('click', function(ev) {
    var $li = $(this).parent();

    if ($li.is('.active')) {
      $li.removeClass('active active-sm');
      $('ul:first', $li).slideUp(function() {
        setContentHeight();
      });
    } else {
      // prevent closing menu if we are on child menu
      if (!$li.parent().is('.child_menu')) {
        openUpMenu();
      } else {
        if ($BODY.is('nav-sm')) {
          if (!$li.parent().is('child_menu')) {
            openUpMenu();
          }
        }
      }

      $li.addClass('active');

      $('ul:first', $li).slideDown(function() {
        setContentHeight();
      });
    }
  });

  // toggle small or large menu
  $MENU_TOGGLE.on('click', function() {
    if ($BODY.hasClass('nav-md')) {
      $SIDEBAR_MENU.find('li.active ul').hide();
      $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
    } else {
      $SIDEBAR_MENU.find('li.active-sm ul').show();
      $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
    }

    $BODY.toggleClass('nav-md nav-sm');

    setContentHeight();
  });

  // check active menu
  $SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page');

  $SIDEBAR_MENU.find('a').filter(function() {
    return this.href == CURRENT_URL;
  }).parent('li').addClass('current-page').parents('ul').slideDown(function() {
    setContentHeight();
  }).parent().addClass('active');

  // recompute content when resizing
  $(window).smartresize(function() {
    setContentHeight();
  });

  setContentHeight();

  // fixed sidebar
  if ($.fn.mCustomScrollbar) {
    $('.menu_fixed').mCustomScrollbar({
      autoHideScrollbar: true,
      theme: 'minimal',
      mouseWheel: {
        preventDefault: true
      }
    });
  }
}
// /Sidebar

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  init_sidebar();
});
.left_col { background: #2A3F54; }
.nav-sm .container.body .col-md-3.left_col { min-height: 100%; width: 70px; padding: 0; z-index: 9999; position: absolute; }
.nav-sm .container.body .col-md-3.left_col.menu_fixed {position: fixed; height: 100%;}
.nav-sm .container.body .col-md-3.left_col .mCSB_container,
.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox { overflow: visible; }
.nav-sm .hidden-small { visibility: hidden; }
.nav-sm .container.body .right_col { padding: 10px 20px; margin-left: 70px; z-index: 2;}
.nav-sm .navbar.nav_title { width: 70px;}
.nav-sm .navbar.nav_title a span { display: none;}
.nav-sm .navbar.nav_title a i {font-size: 27px;margin: 13px 0 0 3px;}
.site_title i {  border: 1px solid #EAEAEA; padding: 5px 6px; border-radius: 50%;}
.nav-sm .main_container .top_nav {display: block; margin-left: 70px; z-index: 2;}
.nav-sm .nav.side-menu li a {text-align: center !important; font-weight: 400; font-size: 10px; padding: 10px 5px;}
.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {border-right: 5px solid #1ABB9C;}
.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {position: static; width: 200px;background: none;}
.nav-sm>.nav.side-menu>li.active-sm>a {color: #1ABB9C !important;}
.nav-sm .nav.side-menu li a i.toggle-up {display: none !important;}
.nav-sm .nav.side-menu li a i {font-size: 25px !important; text-align: center;width: 100% !important; margin-bottom: 5px;}
.nav-sm ul.nav.child_menu { left: 100%;  position: absolute; top: 0;width: 210px;z-index: 4000; background: #3E5367;display: none;}
.nav-sm ul.nav.child_menu li {padding: 0 10px;}
.nav-sm ul.nav.child_menu li a { text-align: left !important;}
.menu_section h3 { padding-top: 5px;padding-bottom: 5px;padding-left: 23px;color: #fff; background-color: rgba(255, 255, 255, 0.06); text-transform: uppercase;letter-spacing: .5px; font-weight: bold;font-size: 11px;  margin-bottom: 0;  margin-top: 0;  text-shadow: 1px 1px #000;}
.menu_section>ul {margin-top: 5px;display: block;}
.main_menu span.fa {float: right;text-align: center;margin-top: 5px;font-size: 10px;min-width: inherit;color: #C4CFDA;}
.active a span.fa {text-align: right !important;margin-right: 4px;}
.nav-sm .menu_section {margin: 0;}
.nav-sm span.fa,
.nav-sm .menu_section h3 {display: none;}
.nav-sm li li span.fa {display: inline-block;}
.nav_menu {float: left;background: #EDEDED;border-bottom: 1px solid #D9DEE4;margin-bottom: 10px;width: 100%;position: relative;}
@media (min-width: 480px) {
  .nav_menu {position: static;}
  .item {display: block;}
}
.nav-md .container.body .col-md-3.left_col {min-height: 100%;width: 230px;padding: 0;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;z-index: 1;}
.nav-md .container.body .col-md-3.left_col.menu_fixed {height: 100%;position: fixed;}
body .container.body .right_col {background: #F7F7F7;}
.nav-md .container.body .right_col {padding: 10px 20px 0;margin-left: 230px;}
.nav_title {width: 230px;float: left;background: #2A3F54;border-radius: 0;height: 57px;padding: 0px;}
@media (max-width: 991px) {
  .nav-md .container.body .right_col,
  .nav-md .container.body .top_nav {width: 100%;margin: 0;}
  .nav-md .container.body .col-md-3.left_col {display: none;}
  .nav-md .container.body .right_col {width: 100%;padding-right: 0;}
  .right_col {padding: 10px !important;}
  .item {display: block;}
}

.container {width: 100%;padding: 0;max-width: 100%;}
.navbar-nav>li>a,
.navbar-brand,
.navbar-nav>li>a {color: #fff !important;}
body {color: #73879C;background: #2A3F54;font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;font-size: 13px;font-weight: 400;line-height: 1.471;}
.main_container .top_nav {display: block;margin-left: 230px;}
.main_content {padding: 10px 20px;}
h1,.h1,h2,.h2,h3,.h3 {margin-top: 10px; margin-bottom: 10px;}
a {color: #5A738E;text-decoration: none;}
a,a:visited,a:focus,a:active,
 :visited, :focus, :active,
.btn:focus,.btn:active:focus,
.btn.active:focus,.btn.focus,
.btn:active.focus,.btn.active.focus {outline: 0;}
a:hover,
a:focus {
  text-decoration: none;
}
.navbar {
  margin-bottom: 0;
}

.navbar-header {
  background: #34495E;
}

.navbar-right {
  margin-right: 0;
}

.top_nav .navbar-right {
  margin: 13px;
  width: auto;
  float: right;
}

.top_nav .navbar-right li {
  display: inline-block;
  float: right;
  position: static;
}

@media (min-width: 480px) {
  .top_nav .navbar-right li {
    position: relative;
  }
  .item {
    display: block;
  }
}

.top_nav .dropdown-menu li {
  width: 100%;
}

.dropdown-item {
  width: 100%;
  padding: 12px 20px;
}

.top_nav li a i {
  font-size: 15px;
}

.navbar-static-top {
  position: fixed;
  top: 0;
  width: 100%;
}

.sidebar-header {
  border-bottom: 0;
  margin-top: 46px;
}

.sidebar-header:first-of-type {
  margin-top: 0;
}

.nav>li {
  position: relative;
  display: block;
}

.nav.side-menu>li {
  position: relative;
  display: block;
  cursor: pointer;
}

.nav.side-menu>li>a {
  margin-bottom: 6px;
}

.nav.side-menu>li>a:hover {
  color: #F2F5F7 !important;
}

.nav.side-menu>li>a:hover,
.nav>li>a:focus {
  text-decoration: none;
  background: transparent;
}

.nav.child_menu {
  display: none;
}

.nav.child_menu li:hover,
.nav.child_menu li.active {
  background-color: rgba(255, 255, 255, 0.06);
}

.nav.child_menu li {
  padding-left: 36px;
}

.nav-md ul.nav.child_menu li:before {
  background: #425668;
  bottom: auto;
  content: "";
  height: 8px;
  left: 23px;
  margin-top: 15px;
  position: absolute;
  right: auto;
  width: 8px;
  z-index: 1;
  border-radius: 50%;
}

.nav-md ul.nav.child_menu li:after {
  border-left: 1px solid #425668;
  bottom: 0;
  content: "";
  left: 27px;
  position: absolute;
  top: 0;
}

.nav-md ul.nav.child_menu li:last-child::after {
  bottom: 50%;
}

.nav.side-menu>li>a,
.nav.child_menu>li>a {
  color: #E7E7E7;
  font-weight: 500;
}

.nav.child_menu li li:hover,
.nav.child_menu li li.active {
  background: none;
}

.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
  color: #fff;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 13px 15px 12px;
}

.nav.side-menu>li.current-page,
.nav.side-menu>li.active {
  border-right: 5px solid #1ABB9C;
}

.nav li.current-page {
  background: rgba(255, 255, 255, 0.05);
}

.nav li li li.current-page {
  background: none;
}

.nav li li.current-page a {
  color: #fff;
}

.nav.side-menu>li.active>a {
  text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#334556), to(#2C4257)), #2A3F54;
  background: linear-gradient(#334556, #2C4257), #2A3F54;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
}

.navbar-brand,
.navbar-nav>li>a {
  font-weight: 500;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 32px;
}

.site_title {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 22px;
  width: 100%;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 59px;
  display: block;
  height: 55px;
  margin: 0;
  padding-left: 10px;
}

.site_title:hover,
.site_title:focus {
  text-decoration: none;
}

.nav.navbar-nav>li>a {
  color: #515356 !important;
}

.nav.top_menu>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #34495E !important;
}

.nav>li>a:hover,
.nav>li>a:focus {
  background-color: transparent;
}

.toggle {
  float: left;
  margin: 0;
  width: 70px;
}

.toggle a {
  padding: 15px 15px 0;
  margin: 0;
  cursor: pointer;
}

.toggle a i {
  font-size: 26px;
}

.nav.child_menu>li>a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  padding: 9px;
}

.main_menu_side {
  padding: 0;
}

.bs-docs-sidebar .nav>li>a {
  display: block;
  padding: 4px 6px;
}

footer {
  background: #fff;
  padding: 10px 20px;
  display: block;
}

.nav-sm footer {
  margin-left: 70px;
}

.footer_fixed footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
}

@media (min-width: 768px) {
  .footer_fixed footer {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .footer_fixed .nav-sm footer {
    margin-left: 0;
  }
}

.dropdown-menu {
  border: medium none;
  -webkit-box-shadow: none;
  box-shadow: none;
  display: none;
  float: left;
  font-size: 12px;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 9998;
  border: 1px solid #D9DEE4;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-menu>li>a {
  color: #5A738E;
}

.navbar-nav .open .dropdown-menu {
  position: absolute;
  background: #fff;
  margin-top: 0;
  border: 1px solid #D9DEE4;
  -webkit-box-shadow: none;
  right: 0;
  left: auto;
  width: 220px;
}

.navbar-nav .open .dropdown-menu.msg_list {
  width: 300px !important;
}

.sidebar-footer {
  bottom: 0px;
  clear: both;
  display: block;
  padding: 5px 0 0 0;
  position: fixed;
  width: 230px;
  background: #2A3F54;
}

.sidebar-footer a {
  padding: 7px 0 3px;
  text-align: center;
  width: 25%;
  font-size: 17px;
  display: block;
  float: left;
  background: #172D44;
}

.sidebar-footer a:hover {
  background: #425567;
}

a.user-profile {
  color: #5E6974 !important;
}

.user-profile img {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  margin-right: 10px;
}

.main_menu .fa {
  width: 26px;
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*edit*/

.right_col {
    height: calc(100vh - 100px);
    padding: 10px 20px 0;
    margin-left: 230px;
    overflow-y: auto;
}

footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.main_container {
    position: relative;
    height: 100vh;
}

.nav_menu {
    margin-bottom: unset;
}

#sidebar-menu {
    height: 88vh;
    overflow: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="images/favicon.ico" type="image/ico" />
  <title>Single Page Application</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0b110a110c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <!-- Font Awesome -->
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body class="nav-md">
  <div class="container body">
    <div class="main_container">
      <div class="col-md-3 left_col">
        <div class="left_col scroll-view">
          <div class="navbar nav_title" style="border: 0;">
            <a href="#" class="site_title"><i class="fa fa-paw"></i> SPA</a>
          </div>
          <div class="clearfix"></div>
          <!-- sidebar menu -->
          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
              <h3>General</h3>
              <ul class="nav side-menu">
                <li>
                  <a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="index.html">Dashboard</a></li>
                    <li><a href="#">Dashboard2</a></li>
                    <li><a href="#">Dashboard3</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">General Form</a></li>
                    <li><a href="#">Advanced Components</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">General Elements</a></li>
                    <li><a href="#">Media Gallery</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">Tables</a></li>
                    <li><a href="#">Table Dynamic</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">Chart JS</a></li>
                    <li><a href="#">Chart JS2</a></li>
                    <li><a href="#">Moris JS</a></li>
                    <li><a href="#">ECharts</a></li>
                    <li><a href="#">Other Charts</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">Fixed Sidebar</a></li>
                    <li><a href="#">Fixed Footer</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="menu_section">
              <h3>Live On</h3>
              <ul class="nav side-menu">
                <li>
                  <a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">E-commerce</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Project Detail</a></li>
                    <li><a href="#">Contacts</a></li>
                    <li><a href="#">Profile</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#">403 Error</a></li>
                    <li><a href="#">404 Error</a></li>
                    <li><a href="#">500 Error</a></li>
                    <li><a href="#">Plain Page</a></li>
                    <li><a href="#">Login Page</a></li>
                    <li><a href="#">Pricing Tables</a></li>
                  </ul>
                </li>
                <li>
                  <a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="#level1_1">Level One</a></li>
                    <li>
                      <a>Level One<span class="fa fa-chevron-down"></span></a>
                      <ul class="nav child_menu">
                        <li class="sub_menu"><a href="level2.html">Level Two</a>
                        </li>
                        <li><a href="#level2_1">Level Two</a>
                        </li>
                        <li><a href="#level2_2">Level Two</a>
                        </li>
                      </ul>
                    </li>
                    <li><a href="#level1_2">Level One</a></li>
                  </ul>
                </li>
                <li><a href="#"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
              </ul>
            </div>
          </div>
          <!-- /sidebar menu -->

          <!-- /menu footer buttons -->
          <div class="sidebar-footer hidden-small">
            <a data-toggle="tooltip" data-placement="top" title="Settings" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a>
            <a data-toggle="tooltip" data-placement="top" title="FullScreen" href="#"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a>
            <a data-toggle="tooltip" data-placement="top" title="Lock" href="#"><i class="fa fa-lock" aria-hidden="true"></i></a>
            <a data-toggle="tooltip" data-placement="top" title="Logout" href="#"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
          </div>
          <!-- /menu footer buttons -->
        </div>
      </div>

      <!-- Header: top navigation -->
      <header>
        <div class="top_nav">
          <div class="nav_menu">
            <div class="nav toggle">
              <a id="menu_toggle"><i class="fa fa-bars"></i></a>
            </div>
            <nav class="nav navbar-nav">
              <ul class=" navbar-right">
                <li class="nav-item dropdown open" style="padding-left: 15px;">
                  <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
                    <img src="images/img.jpg" alt="">John Doe
                  </a>
                  <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="javascript:;">Profile</a>
                    <a class="dropdown-item" href="javascript:;">
                      <span class="badge bg-danger pull-right">50%</span>
                      <span>Settings</span>
                    </a>
                    <a class="dropdown-item" href="javascript:;">Help</a>
                    <a class="dropdown-item" href="#"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
                  </div>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </header>
      <!-- Header: top navigation -->

      <!-- Main: page content -->
      <div class="right_col" role="main">
        <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Secondary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <div class="card text-white bg-success mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Success card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Danger card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h5 class="card-title">Warning card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
      <!-- Main: page content -->

      <!-- Footer: content -->
      <footer>
        <div class="pull-right">Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a></div>
        <div class="clearfix"></div>
      </footer>
      <!-- Footer: content -->
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b0aab1aab7" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

关于html - 如何制作粘性页眉、页脚和侧边栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64779873/

上一篇：flutter - 如何在 flutter 中获取我们的实时位置？

下一篇：php - 使用带有 html 和 php 的文件页面

相关文章：

javascript - 如何处理未定义主体的响应？

javascript - 使用 jquery validate 更改输入标签的颜色

jquery - 从 ui-filterable 中删除搜索图标？

html - 如何在列表元素中获取 2 个 div 元素以使用页面上的可用宽度？

javascript - 使用 angularjs 和 ui-bootstrap 的谷歌图像布局

html - 绘制框和每个框的宽度被忽略，一般间距不起作用

javascript - 简单的 Javascript 修改以返回乘以特定数字的输出？

html - 如何使用 CSS 使图像变暗？

jquery - 这些jquery选择器语句有什么区别

css - 良好的 CSS 设计和 IE6/IE7 支持是否相互排斥？

©2024 IT工具网  联系我们