我是 html、css、javascript 的新手。我正在尝试将页面加载为页面中的子菜单项。我有这个代码：
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=1024">
<head>
<link rel="stylesheet" type="text/css" href="homePage.css">
<title> Sample Website </title>
<script>
function showPicture(value)
{
if(value == "true")
{
document.getElementById("content").innerHTML = '';
document.getElementById("content").innerHTML
+= '<iframe id="Picturebox" width = "76%" height = "545" src="menu1.html"></iframe>';
}
else
{
document.getElementById("content").innerHTML = '';
}
}
</script>
</head>
<body>
<div id = "Header">
<h1> SAMPLE WEBSITE </h1>
</div>
<div id = "Banner">
<img id ="imgBanner" src = "./images/images.jpeg" />
</div>
<div id="container">
<div id = "menu">
<table cellpadding="15">
<tr>
<td>
<a href="#" onclick="showPicture('true')">Menu 1</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="showPicture('false')">Menu 2</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="showPicture('false')">Menu 3</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="showPicture('false')">Menu 4</a>
</td>
</tr>
</table>
</div>
<div id="content"></div>
</div>
</body>
</html>
menu1.html
<html>
<meta name="viewport" content="width=80%,height=80%, scale=0.5">
<head>
<link rel="stylesheet" type="text/css" href="subPage.css">
</head>
<body>
<h1>Menu 1 </h1>
<div id = "UnderLine"></div>
<p> Hello!,
this is a sample page having a heading,some content and 6 pictures .
</p>
<div id = "UnderLine"></div><br/>
<h4> Images </h4>
<div id = "UnderLine"></div><br/>
<div class="imgbox" style="position:relative;">
<img id = "pictures" src="./images/p (1).jpg" name=""/>
<img id = "pictures" src="./images/p (2).jpg" name=""/>
<img id = "pictures" src="./images/p (3).jpg" name=""/>
<img id = "pictures" src="./images/p (4).jpg" name=""/>
<img id = "pictures" src="./images/p (5).jpg" name=""/>
<img id = "pictures" src="./images/p (6).jpg" name=""/>
</div>
</body>
</html>
在这里我尽了最大的努力。但是IFrame加载带有水平滚动条的页面。我需要帮助使它适合里面。有没有办法获得相同的。我用谷歌搜索，但其中一些或全部都在说宽度。不是关于身高。