简单的html/css布局？（两列）
我很难想出html/css布局来满足以下要求： 其中左侧区域为静态菜单。右侧区域是动态内容，通过调用ASP.Net的简单的html/css布局？（两列）,html,css,asp.net-mvc-3,layout,razor,Html,Css,Asp.net Mvc 3,Layout,Razor,我很难想出html/css布局来满足以下要求： 其中左侧区域为静态菜单。右侧区域是动态内容，通过调用ASP.Net的RenderBody方法生成。你可能不相信，但我已经花了几个小时试图弄明白这一点。我一直得到要么右部分在左部分的下方，占据100%的宽度，要么根本不显示，Chrome的object inspector显示它的0像素宽 我觉得自己像个十足的白痴，因为这似乎很容易。我能得到一些帮助吗？有几种方法可以解决这个问题。这里有一个不是特别奇特，但却是直截了当的方法： <body>
RenderBody我觉得自己像个十足的白痴，因为这似乎很容易。我能得到一些帮助吗？有几种方法可以解决这个问题。这里有一个不是特别奇特，但却是直截了当的方法：
<body>
<div id="menu">MENU</div>
<div id="content"> content <br /> content <br /> content </div>
</body>
有关工作示例，请参阅。此解决方案的另一个好处是，您的内容区域将完全占据其父内容区域剩余宽度的100%：
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
适用于IE7及更新版本Safari/Chrome/Opera/Firefox…实现这一点的最佳方法是使用已经被认为是安全的框大小属性 看看小叮当-> 它可以按你所希望的那样工作。菜单的固定宽度，内容区域的基于百分比的宽度 然后 …如果希望背景颜色扩展到两个框之间的最高高度（请记住，菜单可以比内容框高一倍，反之亦然），那么唯一的方法是使用背景图像并将其放置在两个框的下方（无javascript）。使用css3渐变（也可以安全使用）非常简单。看一看:
HTML输出将有助于回答这个问题。哦，你会惊讶于有多少人在使用CSS进行简单的列布局时遇到困难。唉，如今桌子的布局被人看不起。
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }