Question

现在我在我的网站上使用框架在屏幕上的leftsite上获得一张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文件，但我真的很想找到一个能给我相同布局和解决方案的解决方案。体面的.HTML5功能，并能够让模拟器全屏运行。

Answer 1

与此同时，我已将此请求放在其他地方，并使用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>

我仍然需要使用页眉和页脚，但这看起来效果很好。

.HTML5替代帧的1个固定（菜单）列

1 个答案: