.HTML5 替代具有 1 个固定（菜单）列的框架

【问题标题】：.HTML5 alternative for frames with 1 fixed (menu) column.HTML5 替代具有 1 个固定（菜单）列的框架
【发布时间】：2017-09-14 08:31:44
【问题描述】：

现在我在我的网站上使用框架来在屏幕左侧获取一个包含 256 像素宽图片的菜单：

<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 文件，但我真的很想找到一种解决方案，该解决方案将在体面的 .HTML5 中为我提供相同的布局和功能，并能够让模拟器全屏运行.

【问题讨论】：

标签： html menu size fixed frames

【解决方案1】：

与此同时，我也在其他地方提出了这个请求，并使用 CSS Grids 提出了一个很好的解决方案。

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>

我仍然需要稍微调整一下页眉和页脚，但这似乎效果很好。

【讨论】：