Как закрепить div с iframe?

Question

Александер фон Крюков-Беллинсгаузен-Магеллан-Демидович-Эйлер @MartinJeans

Человек

HTML

Как закрепить div с iframe?

Есть код:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Энергетика России и СССР</title>
  <script type="text/javascript">
function searchImages() {
    const searchInput = document.getElementById('searchInput').value.toLowerCase();
    const imageContainers = document.querySelectorAll('.imageContainer');

    for (let container of imageContainers) {
        const imageName = container.querySelector('a').textContent.toLowerCase();

        if (imageName.includes(searchInput)) {
            container.style.display = 'block';
        } else {
            container.style.display = 'none';
        }
    }

    const foundImage = document.querySelector('.imageContainer[style="block"] img');
    if (foundImage) {
        foundImage.style.position = 'absolute';
        foundImage.style.top = '0';
        foundImage.style.left = '0';

        for (let container of imageContainers) {
            if (container !== foundImage.parentElement) {
                container.style.display = 'none';
            }
        }
    }
}
  </script>
</head>

<body>

<style>
  body {
    font-family: 'Times New Roman';
  }

  iframe {
  	width: 100%
  }

  .tab {
    display: flex;
    position: fixed;
  }

  .tab-content {
    display: none;
    width: 70%
  }

  .tab-content:target {
    display: block;
  }

  .tab-nav {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-wrap: wrap;
    order: -1;
    margin-right: 1rem;
    margin-bottom: 1rem;
    width: 30%;
  }

  .tab-link {
    display: block;
    text-decoration: none;
    }
</style>

<div class="container">
  <div class="tab">
    <div class="tab-content" id="content-1">
      <iframe src="rbmk1.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-2">
    	<iframe src="rbmk3.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-3">
     	<iframe src="rbmk4.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-4">
    	<iframe src="reorg_of_energy.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-5">
    	<iframe src="thermodin.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-6">
    	<iframe src="pump.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-7">
    	<iframe src="pipe.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-8">
    	<iframe src="atom_power.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-9">
    	<iframe src="atom_power1.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-10">
    	<iframe src="atom99.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-11">
    	<iframe src="compare.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-12">
    	<iframe src="conf_rostov.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-13">
    	<iframe src="energ.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-14">
    	<iframe src="energ_sng.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-15">
    	<iframe src="enrgy_ros.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-16">
    	<iframe src="expertise.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-17">
    	<iframe src="priory.html" height="550">ОШИБКА!</iframe>
    </div>
    <div class="tab-content" id="content-18">
    	<iframe src="small.html" height="550">ОШИБКА!</iframe>
    </div>




    <div class="tab-nav"><p>
    	<label id="find">Поиск документа </label><input id="searchbar"
               onkeyup="search()"
               type="text" name="search"
               placeholder="Введите..."><br>
               <script type="text/javascript">
  function search() {
  let input = document.getElementById('searchbar').value
  input = input.toLowerCase();
  let x = document.getElementsByClassName('tab-link');
 
  for (i = 0; i < x.length; i++) {
    if (!x[i].innerHTML.toLowerCase().includes(input)) {
      x[i].style.display = "none";
    }
    else {
      x[i].style.display = "list-item";
    }
  }
}</script>

	  <hr width="100%" color="black">
      <a class="tab-link" href="#content-1"><button>Упрощенная тепловая схема АЭС с реактором РБМК – 1000</button></a>
      <a class="tab-link" href="#content-2"><button>Контур многократной принудительной циркуляции (КМПЦ)</button></a>
      <a class="tab-link" href="#content-3"><button>Конструкция реактора РБМК-1000</button></a>
      <a class="tab-link" href="#content-4"><button>Преобразование энергии</button></a>
      <a class="tab-link" href="#content-5"><button>Основы термодинамики</button></a>
      <a class="tab-link" href="#content-6"><button>Насосы. Общие сведения.</button></a>
      <a class="tab-link" href="#content-7"><button>Трубопроводы атомной электростанции.</button></a>
      <a class="tab-link" href="#content-8"><button>Ядерная энергия</button></a>
      <a class="tab-link" href="#content-9"><button>Атомная энергетика как фактор национальной безопастности России</button></a>
      <a class="tab-link" href="#content-10"><button>Атомная энергетика России: итоги 1999 г. проблемы и перспективы</button></a>
      <a class="tab-link" href="#content-11"><button>Сравнение источников энергии.</button></a>
      <a class="tab-link" href="#content-12"><button>Конференция по атомной энергетике в Ростове.</button></a>
      <a class="tab-link" href="#content-13"><button>Энергетика XXI ВЕКА и Россия.</button></a>
      <a class="tab-link" href="#content-14"><button>Энергетика СНГ: от распада СССР до настоящего времени.</button></a>
      <a class="tab-link" href="#content-15"><button>Электроэнергетика России: состояние и перспективы.</button></a>
      <a class="tab-link" href="#content-16"><button>Обзорный материал по "Заключению экспертной комиссии Государственной экологической экспертизы по проекту строительства Ростовской АЭС", утвержденному Председателем Государственного комитета Российской Федерации по охране окружающей среды </button></a>
      <a class="tab-link" href="#content-17"><button>Наивысший приоритет. Смоленская АЭС.</button></a>
      <a class="tab-link" href="#content-18"><button>Малая атомная энергетика в теплоснабжении России.</button></a>
       Добавлено: 04-01-2024. Добавил: admin
       <hr width="100%" color="black">
    </p></div>
  </div>
</div>

</body>

</html>

Есть список с кнопками которые перенаправляют на странцы, и рядом div с iframe, как сделать чтобы список рядом крутился вниз а div с iframe оставался на месте. Я видел такое где-то