menu - 你如何制作一个固定的侧边菜单，主要内容缩放到屏幕边缘？

Question

您如何创建一个布局，其中您有一个固定宽度的侧边菜单，但主要内容会缩放到屏幕的其余部分？

以下是标记示例：

<ul id="sideMenu">
   <li>....</li>
</ul>
<div id="mainContent">
   ... everything else ...
</div>

这可能吗？

此外，如果我们可以在 mainContent 上设置一个最小宽度并且让所有浏览器一致地工作，那就太好了；）

Answer 1

浮动 sideMenu，然后设置 mainContent 的边距以匹配它。这可以防止 mainContent 环绕 sideMenu。

#sideMenu{float:left;width:200px;}
#mainContent{margin-left:200px;}

Answer 2

可以通过将你的内容放在一个表格中，将单元格间距和单元格填充设置为 0。将 td 的宽度也设置为 100%。您所要做的就是尝试和错误的方法来查看。