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;
}
<!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/bootstrap@4.5.3/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/bootstrap@4.5.3/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/bootstrap@4.5.3/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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
推荐阅读
- python - NumPy 基于数组索引创建新的 n 个新数组
- android-livedata - 为什么有时 Observer LiveData 会多次显示日志?
- css - 正好在中间重叠一个高度未知的 div
- google-apps-script - 工具菜单缺少 Google 表格中的脚本编辑器菜单项
- python - ffmpeg - 在图像顶部叠加视频
- symfony - 如何使用 LoginFormAuthenticator 和 Login Link Authenticator 在 Symfony 5.2 中为特定路径设置默认身份验证器
- java - 如何从属性文件中读取 java 类/对象名称然后启动它?
- macos - 我无法下载 Mac M1 版本的 VS Code。它说这是一个损坏的文件。有什么问题?
- php - 尝试发送消息时出现 Twilio Conversation 致命错误?
- spring-boot - @Inject 或 @Autowired 将首先被调用