Во-первых, я знаю, что это очень просто, и я так же озадачен, как и вы, что я не могу понять это самостоятельно. У меня нет опыта в веб-разработке, и мне нужно использовать github-страницы для документирования проекта. Я крутил свои колеса на этом в течение смущающего количества времени.
Суть проблемы в том, что я пытаюсь использовать вложенные iframes, но с каждым слоем я получаю другую полосу прокрутки и ничего не прокручивается довольно синхронно c. Если я установил scrolling = "no", контент будет скрыт. Это усугубляется, когда я использую рамки для боковой панели.
Индекс. html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="mainheader">
<b> My Project Name
</b>
</div>
<body>
<div class="topnav">
<a href="overview.html" target="main_body">Overview</a>
<a href="important_concepts.html" target="main_body">Model Concepts/Patterns</a>
<a href="lineage.html" target="main_body">Data Lineage</a>
<a href="entity_metadata.html" target="main_body">Entity Details</a>
<a href="jargon.html" target="main_body">Jargon Glossary</a>
<a href="examples.html" target="main_body">Example Demos</a>
</div>
<!-- This creates a frame in the lower body, with an unwanted scroll bar, but it's not too bad. -->
<iframe name="main_body" src="overview.html" height="100%" width="100%">
</body>
</html>
Это становится более проблематичным c пытается сделать левую боковую панель. Похоже, я просто не понимаю, как высота наследуется между кадрами. На рисунке показано, как боковые панели продолжают складываться, а прокрутка не совсем синхронизирована c. Я попытался увеличить высоту до 100000 и скрыть прокрутку, но затем горизонтальная прокрутка также исключена.
<!DOCTYPE html>
<html>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<body>
<div class="container" style="display: flex; height:100%;">
<div style="display:inline-block;">
<iframe
src="cs_entity_sidebar.html"
name="cs_entity_sidebar"
frameborder="0"
scrolling="no"
width="100%"
align="left">
</iframe>
</div>
<iframe class="second-row"
name="main_overview_content"
scrolling = "yes"
height=10000
align="left"
>
</iframe>
</div>
</html>
На этом сайте есть учебник, который почти то, что я нужно, просто простая раскладка без рамок
https://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
Оперативный фрагмент:
<div id="main-container">
<div id="sidebar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div id="content">Content Area</div>
</div>
Но как мне получить "Область содержимого" заселить связанными html? Когда я пытаюсь сделать это по-своему, html просто выводит меня в отдельное окно без верхней навигации.
Этот вопрос также довольно близок, но не касается того, как получить ссылки и навигацию работает.
Кроме того, я прочитал jquery / ajax - лучший подход здесь, но ничего из того, что я делаю в ajax, не имеет эффекта. Я нахожусь на корпоративном vpn, поэтому я думаю, что есть проблема прокси.
Любая помощь приветствуется.
Редактировать: Jquery / Ajax подход, который не работает. Это не сбой, щелчок просто ничего не делает. Я пробовал разные источники, в том числе библиотеку Google, но src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" - это то, что я видел, работая над другими проектами в моей компании.
Обратите внимание на скриншот, ничего не загружено выше "Выше этого из сценария "
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('test.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
<div>Above is loaded from script</div>
<div>Below is loaded from a frame</div>
<iframe src="test.html" ></iframe>
</body>
</html>
edit2: проверить ошибку просмотра
