我将页面垂直划分为4个div来显示数据。顶部栏是固定的，因为我希望即使用户滚动也可以看到它。下一个div也没关系。第三个div包含内容，因此再次分为3个div。还有一张桌子。每当我调整窗口大小时，它都会变得混乱。我使用％来定义高度和宽度，以便div可以正确对齐。但是在包含表之后，如果窗口调整大小，它将保持在其他div的顶部。
<div style="height:100%;width:100%;position:relative;background-color:#00ff0f;">
<div style="height:4%;width:100%;background-color:#517;">Top Bar</div>
<div style="height:14%;width:100%;background-color:#fff007;">Top advertisement space</div>
<div style="height:26%;width:100%;background-color:#ff0007;">
<table style="width:90%;height:100%;border:3px solid #52D017;"><tbody><tr><td style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"width="10%" valign="top"><div><a href='category/bitmap_pixel'>Bitmap Pixel</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/stencil'>Stencil</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/games'>Games</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/runes'>Runes</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/square'>Square</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/valentine'>Valentine</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"><div><a href='category/russian'>Russian</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;border-right:2px dashed #afafaf;padding:8px;"><div><a href='category/typewriter'>Typewriter</a></div></td>
<td width="10%" valign="top" style="white-space: nowrap;padding:8px;"><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/grid'>Grid</a></div><div><a href='category/western'>Western</a></div></td></tr></tbody></table>
</div>
<div style="height:56%;width:100%;background-color:#5ff007;">Content main</div>
</div>