Блог

Главная - Вопросы по программированию - Черная панель управления: загрузка другой проблемы с высотой HTML-файла

Черная панель управления: загрузка другой проблемы с высотой 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,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>

newpost.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>
    <link href="black-dashboard.css?v=1.0.0" rel="stylesheet" />
    <title>new post</title>
</head>
<body>
    <div class="card">          
        <div class="card-header">
            Nav Item Title
        </div>
        <div class="card-body">
                <form>
                   <!-- simple form here -->
                </form>
        </div>
        
    </div>
    

<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>
</body>
</html>

Я пробовал разные решения CSS, включая использование height: 100% для родительских и дочерних элементов, felx но, похоже, ничего не работает. Вы можете увидеть снимок экрана с результатом ниже:
Результат

Любая помощь была бы очень признательна <3

ОБНОВЛЕНИЕ: проблема была каким-то образом связана с моим редактором. Я использовал Sublime.

Ответ №1:

Попробуйте добавить в свой css:

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

И где я 40px заменил высоту, необходимую для заголовка вашей панели инструментов.

Комментарии:

1. Я уже пробовал решения с высотой, но попробовал еще раз, и безуспешно. Спасибо.

2. Итак, что происходит? Можете ли вы проверить в инспекторе, применяется ли правило?

3. Проблема не связана с CSS. это каким-то образом связано с способом загрузки html и плагином с именем «perfect-scrollbar», который использует панель управления. Я думаю, что это также мешает моей библиотеке jQuery, и именно поэтому я не могу загрузить файл через jQuery. Все еще работаю над этим.

4. Загружена ли таблица стилей? Похоже, путь указан неверно.

Ответ №2:

Попробуйте добавить этот код, чтобы использовать черную панель управления для вашей панели администратора ;

link href=»../assets/css/black-dashboard.css?v = 1.0.0″ rel=»таблица стилей»

Комментарии:

1. Код уже находится в файле: <script src=»black-dashboard.js?v=1.0.0″ type=»text/javascript»></script>

2. Это файл .js.. вам также нужен файл .css

3. @Esger этот файл также включен. пожалуйста, прочитайте коды, приведенные в вопросах, на которые вы собираетесь правильно ответить, чтобы предотвратить отрицательные голоса. удачи!