Javascript 黑色仪表板：加载另一个HTML文件高度问题_Javascript_Html_Jquery_Css

Javascript 黑色仪表板：加载另一个HTML文件高度问题

javascript html jquery css

Javascript 黑色仪表板：加载另一个HTML文件高度问题,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我正在尝试使用我的管理面板。当我点击导航图标时，另一个HTML文件正在加载到div标记中。问题是，当我使用JavaScript执行此操作时，加载的文件不是全高的，并且会显示一个垂直滚动条。您可以在下面看到主html： <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,

我正在尝试使用我的管理面板。当我点击导航图标时，另一个HTML文件正在加载到

div

标记中。问题是，当我使用JavaScript执行此操作时，加载的文件不是全高的，并且会显示一个垂直滚动条。您可以在下面看到主html：

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/53b023e3b1.js" crossorigin="anonymous"></script>
    
    <title>Dashboard</title>
</head>
<body>
    <div class="wrapper">
         <div class="sidebar" data-color="purple" data-background-color="white">
            <div class="sidebar-wrapper">
               <ul class="nav">
                  <li class="nav-item">
                      <a class="nav-link" href="#" id="posts"">
                         <i class="fas fa-newspaper"></i>
                         <p>Posts</p>
                      </a>
                  </li>
               </ul>
           </div>
        </div>
    </div>
    <div class="main-panel"> 
        <div class="content">
            <div class="container-fluid">
                <div class="card" id="main-content">
                
                </div>
            </div>
        </div>
    </div>

    <link href="black-dashboard.css?v=1.0.0" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="black-dashboard.js?v=1.0.0" type="text/javascript"></script>

    <script> 
        document.getElementById("posts").onclick = function () {
            document.getElementById("main-content").innerHTML='<object type="text/html" data="newpost.html" ></object>';
        };
    </script>


</body>
</html>

我尝试了不同的CSS解决方案，包括对父元素和子元素使用

height:100%

，以及

felx

，但似乎没有任何效果。您可以在下面看到结果的屏幕截图：

任何帮助都将不胜感激尝试添加到您的css中：

.card {
    height:calc(100vh - 40px);
}

我用

40px

替换仪表板标题所需的高度。

尝试添加此代码以使用黑色仪表板作为管理面板

link href=“../assets/css/black dashboard.css？v=1.0.0”rel=“stylesheet”

代码已经在文件中：即.js文件。。您需要将.css文件作为well@Esger该文件也包括在内。请阅读您打算正确回答的问题中提供的代码，以防止投票被否决。祝你好运我曾经尝试过身高解决方案，但我再试了一次，结果没有成功。谢谢。那会发生什么？你能在检查员处检查一下规则是否适用吗？问题与CSS无关。它与加载html的方式以及仪表板使用的名为“完美滚动条”的插件有某种关联。我认为它还会干扰我的jQuery库，这就是为什么我不能通过jQuery加载文件。仍在处理中。样式表是否已加载？看起来路径不正确。

.card {
    height:calc(100vh - 40px);
}