现在，我在网站上使用框架以获取屏幕左侧256px宽图的菜单：
<frameset cols="275,*">
<frame src="Menu.html" name="menu" title="menu" marginwidth="0" noresize>
<frame src="MSX.html" name="game" title="game" marginwidth="0">
网站：http：//www.file-hunter.com/msx
我一直在寻找符合HTML5的iFrame，但这仍然会给标准的书签问题。除此之外，它将不允许模拟器全屏。
我也一直在看列，但是我找不到一种以某种方式给第一列固定宽度的方法。
我不介意需要更新所有170 .html文件，但是我真的很想找到一个解决方案，该解决方案将为我提供相同的布局＆amp;体面的.html5功能并能够使模拟器运行全屏。
与此同时，我也将此请求也在其他地方提出，并使用CSS网格提出了一个不错的解决方案。
CSS：
*
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 1px;
grid-template-columns: 258px 1fr 1fr;
grid-template-areas:
"....... header header"
"sidebar content content";
background-color: #fff;
color: #444;
}
.box1 {
background-color: #000;
color: #fff;
border-radius: 5px;
padding: 1px;
font-size: 150%;
}
.box2 {
background-color: #fff;
color: #000;
border-radius: 5px;
padding: 1px;
font-size: 100%;
}
.header {
background-color: #999;
}
html：
<body>
<section class="wrapper">
<div class="box1 sidebar">
A bunch of pictures with links
</div>
<div class="box2 content">
Emulator with content
</div>
</section></body>
我仍然必须与标头和页脚一起玩，但这似乎很好。