.HTML5替代用于具有1个固定（菜单）列的帧 [英] .HTML5 alternative for frames with 1 fixed (menu) column
问题描述
现在我在我的网站上使用框架在屏幕的leftsite上获得256px宽图片的菜单：
Right now I am using frames on my website to get a menu with 256px wide pictures on the leftsite of the screen:
<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，但这仍然会给标准的书签问题。除此之外，它不允许模拟器全屏显示。
I have been looking at iframes which are html5 compliant, but this will still give the standard bookmarking problems. Besides that, it will not allow the emulator to go full screen.
我一直在查看列，但我找不到给出第一列的方法以某种方式固定宽度。
I have also been looking at columns, but I can't find a way to give the first column a fixed width somehow.
我不介意需要更新所有170 .html文件，但我真的很想找到一个能给我同样的解决方案布局&体面的.HTML5功能，能够让模拟器全屏运行。
I don't mind needing to update all 170 .html files, but I would be really interested in finding a solution which will give me the same layout & functionality in decent .HTML5 and being able to get the emulator run Full Screen.
推荐答案
与此同时，我已将此请求放在其他地方同样，并使用CSS网格提出了一个很好的解决方案。
In the meantime I have placed this request elsewhere as well and have come up with a nice solution using 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>
我仍然需要使用页眉和页脚，但这似乎很好用。
I still have to play around with the header and footer a bit, but this seems to work quite nicely.
这篇关于.HTML5替代用于具有1个固定（菜单）列的帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
