0

我很难想出 html/css 的布局来适应以下内容：

布局

左侧区域是静态菜单。右侧区域是动态内容，通过调用 ASP.Net 的RenderBody方法生成。你可能不相信，但我已经尝试了好几个小时。我不断地让右侧部分在左侧部分下方以 100% 的宽度结束，或者根本不显示，Chrome 的对象检查器说它的宽度为 0 像素。

我觉得自己像个白痴，因为这似乎应该像馅饼一样容易。我能得到一些帮助吗？

4

3 回答 3

1

有几种方法可以解决这个问题。这是一种不是特别花哨但直截了当的方法：

<body>
    <div id="menu">MENU</div>
    <div id="content"> content <br /> content <br /> content </div>
</body>

CSS：

div { border: 2px solid black; } /* demo purposes */

#menu {
    float: left;
    width: 150px;
}

#content {
    margin-left: 154px; /* menu width + (2 x menu.border-width) */
}

有关工作示例，请参阅此 jsfiddle 。

于 2012-06-05T20:52:06.767 回答
1

此解决方案还有一个额外的好处，即您的内容区域将完全占据其父级剩余宽度的 100%：

<div class="parent">
    <div class="content">blah...</div>
    <div class="left-menu">blah...</div>
</div>

CSS：

.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%; }

关于流体布局的优秀教程： http ://www.alistapart.com/articles/holygrail

适用于 IE7 及更新版本、Safari/Chrome/Opera/Firefox...

于 2012-06-06T16:44:35.603 回答
0

最好的方法是使用已经被认为可以安全使用的 box-sizing 属性。

看看 tinkerbin -> http://tinkerbin.com/AcJjYk0r

它可以按您的意愿工作。菜单的固定宽度，内容区域的基于百分比的宽度。

然后...

...如果您希望背景颜色扩展到两个框之间的最高高度（请记住，一次菜单可能高于内容框，反之亦然），那么唯一的方法就是它（没有javascript）是使用背景图像并将其放在两个框下方。使用 css3 渐变（也可以安全使用）非常简单。看一看：

http://tinkerbin.com/3ETH28Oq

于 2012-06-06T18:19:13.887 回答