получить высоту дочернего div после импорта в html-файл

ProgramBox

получить высоту дочернего div после импорта в html-файл

Post author:admin
Запись опубликована:31 января, 2023
Post category:Вопросы по программированию

#javascript #html #css #web-site-project

#javascript #HTML #css #веб-сайт-проект

Вопрос:

Я пытаюсь создать веб-сайт с несколькими страницами, поэтому вместо воссоздания панели инструментов для каждой страницы я создал отдельный HTML-файл для своей панели инструментов вместе с файлом CSS для него.

затем я просто импортирую свою панель инструментов на каждую страницу таким образом.

 <html>
  <head>
    <title>Pink Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="Styles/HomeStyles.css">
    <link rel="stylesheet" href="Styles/Toolbar.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#toolbarHolder").load("toolbar.html");
      });
    </script>
  </head>

  <body>

    <div id="toolbarHolder"></div>

    <div id="welcomeScreen">
      <img id="welcomeScreenImg" src="Images/welcome.jpg" alt="Pink Home">
      <p id="welcomeScreenText">Allow us to help you make your home look better</p>
    </div>
  </body>

а что касается файла CSS, единственное, что выделяется, это то, что панель инструментов находится в фиксированном положении, чтобы оставаться на экране и позволять другим элементам находиться под ней

здесь все работает хорошо, но на других моих страницах я хочу, чтобы панель инструментов оставалась неподвижной в верхней части экрана, но я хочу, чтобы другие элементы были размещены под ней

Я все еще импортирую HTML-файл в другой div. Я пытался решить эту проблему с помощью js, в основном я думал о том, чтобы получить высоту элемента панели инструментов, а затем присвоить строке поиска значение margin-top, равное этому. но div-элемент панели инструментов имеет высоту 0. это код

 <HTML>
 <head>
  <title>Kitchen</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="Styles/Toolbar.css">
  <link rel="stylesheet" href="Styles/searchbar.css">
  <link rel="stylesheet" href="Styles/kitchen.css">
  <script type="text/javascript" src="JavaScript/toolbar.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
   $(function(){
     $("#toolbarHolder").load("toolbar.html");
     $("#searchbarHolder").load("searchbar.html");
   });

   $('#toolbarHolder').ready(function() {
     var contentPlacement = $('#toolbar').position().bottom   $('#toolbar').height();
     $('#searchbarHolder').css('margin-top',contentPlacement);
   });
  </script>
 </head>
 
 <body>
   <div id="toolbarHolder"></div>
   <div id="searchbarHolder"></div>
 </body>
</html>

Я также пытался получить высоту самой панели инструментов (когда она импортируется в держатель), но я получаю сообщение об ошибке, которое, как я предполагаю, связано с тем, что js ищет элемент перед его импортом.

Я хочу разместить все остальные элементы под моей панелью инструментов, а не за ней, когда я начну прокручивать вниз, панель инструментов останется в верхней части экрана, а другой контент начнет появляться под панелью инструментов, а затем исчезнет.

1. в вашем вопросе вы не упомянули, где должны быть расположены панель инструментов и поиск.. единственное, что я прочитал, вы сказали, что панель инструментов в верхней части страницы находится в фиксированном положении.. итак, где должен быть расположен поиск?

2. Я хочу начать размещать элементы под панелью инструментов, например, строка поиска должна быть под панелью инструментов, и при прокрутке панель поиска исчезнет, но панель инструментов останется на своем месте.

3. для этого вы должны предоставить свой css как для панели инструментов, так и для ввода в поиск … в случае прокрутки вам нужен javascript.

4. Да, я использую javascript и CSS, как уже упоминалось, но это не работает. панель инструментов находится в верхней части экрана, но строка поиска находится за ней, я хочу, чтобы она была ниже, а затем, когда я прокручиваю вниз, она должна быть ниже. это можно сделать, просто добавив верхнюю границу, равную высоте панели инструментов, но я не могу получить высоту: (

5. как я уже говорил, вы должны предоставить вам css-код для поиска и панели инструментов в вашем вопросе.

Ответ №1:

Просто укажите padding-top: height-of-toolbar тег body в вашем CSS-файле.

допустим, высота вашей панели инструментов в 55 пикселей больше,

 body{
  padding-top: 55px; /* height of toolbar*/
 }

 <body>
   <div id="toolbarHolder"></div>
   <div id="searchbarHolder"></div>
 </body>