如何将侧板高度同步到动态高度？

Question

当我的 div 内容变大时，我的侧面板高度不会扩大。我已将高度设置为 100%，它对于移动视图工作正常，但对于桌面视图，有时我的侧边栏高度不会增加，因为它是固定的。但我希望这个高度随着我的 div 内容而动态变化。这是我的整个代码：JSFiddle

在这里你可以看到，如果你点击导航栏，它会打开导航栏，在下面你会看到侧栏和 div 内容不在同一高度。这是我遇到的问题：

我想要扩大侧边栏。我该如何解决这个问题？我只能说我必须改变这个 css 类的高度，但是如何改变？：

.sidepanel {

    height: 100%; 

    width: 0; 

    position: absolute; 

    z-index: 1;

    left: 0;

    background-color: #221F20; 

    overflow-x: hidden; 

    padding-top: 40px; 

    transition: 0.3s;

}

Answer 1

如果你补充position: relative你的身体，你的问题应该得到解决。$(document).ready(function() {&nbsp; &nbsp; //sidepanel navigation&nbsp; &nbsp; $(".toggleButton").on("click", function() {&nbsp; &nbsp; &nbsp; &nbsp; if ($(".sidepanel").css("width") == "0px") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var mainWidth = $("#main").width() - 256;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".sidepanel").css("width", `15%`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#main").css("margin-left", `15%`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#main").css("width", `85%`);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".sidepanel").css("width", "0%");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#main").css("margin-left", "0%");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#main").css("width", "100%");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; //menu item navigation&nbsp; &nbsp; $(".menuItem").on("click", function() {&nbsp; &nbsp; &nbsp; &nbsp; // if this menuitem is collapsed&nbsp; &nbsp; &nbsp; &nbsp; if ($(this).next().css("height") == "0px") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // turning off all other menu items except for this&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".menuItem").not($(this)).next("div").css("height", "0px");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".menuItem").not($(this)).removeClass("openAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".menuItem").not($(this)).addClass("collapsedAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // turning off all sub menu items except for this&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".subMenuItem").next("div").css("height", "0px");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".subMenuItem").removeClass("openAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".subMenuItem").addClass("collapsedAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // substituting collapsed class for open class&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass("collapsedAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("openAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var numberOfChildren = $(this).next("div").find("> a").length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var height = 37 * numberOfChildren;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).next("div").css("height", `${height}px`);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass("openAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("collapsedAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).next("div").css("height", "0px");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; // sub menu item navigation&nbsp; &nbsp; $(".subMenuItem").on("click", function() {&nbsp; &nbsp; &nbsp; &nbsp; // if this menuitem is collapsed&nbsp; &nbsp; &nbsp; &nbsp; if ($(this).next().css("height") == "0px") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // accesing sibling open anchor&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var openAnchorChildNumber = $(this).parent().find(".openAnchor").first().next("div").find("> a").length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var heightToDeduce = 37 * openAnchorChildNumber;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(heightToDeduce);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // turning off all other sub menu items except for this&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".subMenuItem").not($(this)).next("div").css("height", "0px");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".subMenuItem").not($(this)).removeClass("openAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".subMenuItem").not($(this)).addClass("collapsedAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // substituting collapsed class for open class&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass("collapsedAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("openAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var numberOfChildren = $(this).next("div").find("> a").length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var height = 37 * numberOfChildren;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).next("div").css("height", `${height}px`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var parentHeight = $(this).parent().height() + height - heightToDeduce;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().css("height", `${parentHeight}px`);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass("openAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("collapsedAnchor");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).next("div").css("height", "0px");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var numberOfChildren = $(this).next("div").find("> a").length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var height = 37 * numberOfChildren;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var parentHeight = $(this).parent().height() - height;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().css("height", `${parentHeight}px`);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});body {&nbsp; position: relative;}/* The sidepanel menu */.sidepanel {&nbsp; &nbsp; height: 100%; /* Specify a height */&nbsp; &nbsp; width: 0; /* 0 width - change this with JavaScript */&nbsp; &nbsp; position: absolute; /* Stay in place */&nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; background-color: #221F20; /* Black*/&nbsp; &nbsp; overflow-x: hidden; /* Disable horizontal scroll */&nbsp; &nbsp; padding-top: 40px; /* Place content 60px from the top */&nbsp; &nbsp; transition: 0.3s;}.sidepanel .collapsedAnchor::after {&nbsp; &nbsp; font-family: 'Font Awesome 5 Free';&nbsp; &nbsp; float: right;&nbsp; &nbsp; font-weight: 900;&nbsp; &nbsp; content: "\f054";}.sidepanel .openAnchor::after {&nbsp; &nbsp; font-family: 'Font Awesome 5 Free';&nbsp; &nbsp; float: right;&nbsp; &nbsp; font-weight: 900;&nbsp; &nbsp; content: "\f078";}/* The sidepanel links */.sidepanel a {&nbsp; &nbsp; padding: 8px 8px 8px 32px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-size: 25px;&nbsp; &nbsp; color: #B7B6B8;&nbsp; &nbsp; display: block;&nbsp; &nbsp; transition: 0.3s;&nbsp; &nbsp; font-size: 13px;}/* When you mouse over the navigation links, change their color */.sidepanel a:hover {&nbsp; &nbsp; color: #FFFFFF;}/* Position and style the close button (top right corner) */.sidepanel .closebtn {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; right: 25px;&nbsp; &nbsp; font-size: 36px;&nbsp; &nbsp; margin-left: 50px;}a.menuItem i.fa{&nbsp; &nbsp; font-size: 15px;}#main {&nbsp; &nbsp; transition: margin-left 0.5s;&nbsp; &nbsp; padding: 16px;}@media screen and (max-height: 450px) {&nbsp; &nbsp; .sidenav {&nbsp; &nbsp; &nbsp; &nbsp; padding-top: 15px;&nbsp; &nbsp; }&nbsp; &nbsp; .sidenav a {&nbsp; &nbsp; &nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; }}.sidepanel .subMenus {&nbsp; &nbsp; padding-left: 3%;&nbsp; &nbsp; /* position: fixed; */&nbsp; &nbsp; overflow-y: hidden;&nbsp; &nbsp; transition: 0.5s;}.subMenus a {&nbsp; &nbsp; padding: 8px 8px 8px 32px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-size: 25px;&nbsp; &nbsp; color: #818181;&nbsp; &nbsp; display: block;&nbsp; &nbsp; transition: 0.3s;&nbsp; &nbsp; font-size: 13px;}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>&nbsp; &nbsp; <div class="navbar" >&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; user&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp;<div class="sidepanel">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <!-- General panel -->&nbsp; &nbsp; <a href="#"><i class="fas fa-file-alt sidepanel-icon"></i>&nbsp; General</a></div><div class="container-fluid px-5 mt-2" id="main">&nbsp; &nbsp; <div class="row py-4">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6 page-title-div">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="page-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>HTML</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row card py-4 rounded">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6 page-title-div">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>In HTML, there are two main types of lists:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unordered lists (<ul>) - the list items are marked with bullets&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ordered lists (<ol>) - the list items are marked with numbers or letters&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; The CSS list properties allow you to:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Set different list item markers for ordered lists&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Set different list item markers for unordered lists&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Set an image as the list item marker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Add background colors to lists and list items&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>

Answer 2

位置应固定。top 0属性解决了空间问题。在导航内部添加了切换开关，以便在打开时对其进行切换，如果您愿意，您只需重新设置导航内部切换的样式即可。.sidepanel {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; width: 0;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; z-index: 9999;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; background-color: #221F20;&nbsp; &nbsp; overflow-x: hidden;&nbsp; &nbsp; padding-top: 40px;&nbsp; &nbsp; transition: 0.3s;}&nbsp; &nbsp; <div class="navbar" >&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; user&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp;<div class="sidepanel">&nbsp; &nbsp; &nbsp;<a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>&nbsp; &nbsp; <!-- General panel -->&nbsp; &nbsp; <a href="#"><i class="fas fa-file-alt sidepanel-icon"></i>&nbsp; General</a></div><div class="container-fluid px-5 mt-2" id="main">&nbsp; &nbsp; <div class="row py-4">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6 page-title-div">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="page-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>HTML</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row card py-4 rounded">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6 page-title-div">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>In HTML, there are two main types of lists:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unordered lists (<ul>) - the list items are marked with bullets&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ordered lists (<ol>) - the list items are marked with numbers or letters&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; The CSS list properties allow you to:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Set different list item markers for ordered lists&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Set different list item markers for unordered lists&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Set an image as the list item marker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Add background colors to lists and list items&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>