【发布时间】：2020-08-19 01:33:00
【问题描述】：
首先，我知道这很简单，但我和你一样感到困惑，我自己无法弄清楚。我没有 web 开发背景，需要使用 github pages 来记录项目。很尴尬的时间，我一直在这上面旋转我的轮子。
问题的症结在于我正在尝试使用嵌套的 iframe，但是对于每一层，我都会得到另一个滚动条，并且没有任何滚动条完全同步。如果我设置 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>
尝试做左侧边栏会带来更多问题。看起来我只是不明白框架之间的高度是如何继承的。该图显示了侧边栏如何不断堆叠，并且滚动并不完全同步。我尝试将高度提高到 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
操作sn-p：
<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 方法不起作用。它没有失败，点击只是没有做任何事情。我尝试了各种来源，包括谷歌库，但 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：检查视图错误
【问题讨论】：
标签： html jquery css ajax iframe