Question

我有一个简单的布局，内容浮动左侧，固定位置菜单位于右侧。它适用于我在'content'div中具有足够内容的任何页面，以便div增长到它的最大宽度。但是我有几页没有足够的文本让div增长到最大尺寸。

HTML：

<div id="frame">
    <div id="content">
        <p>Content goes here</p>
    </div>
    <div id="menu">
        <p>Menu goes here</p>
    </div>
</div>

CSS：

#frame {
    position: absolute;
    border:2px solid red;
}

#content {
    border:1px dashed red;
    float:left;
    margin-right:15em;
}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    width:13em;
}

我可以通过填充一堆 来强制div使用它的最大宽度，但这不是优雅的解决方案。有没有办法让一个几乎空的浮动div增长到它的全尺寸而不诉诸黑客？

Answer 1

~~你为什么不漂浮菜单呢？它更可能是一个固定的大小。~~

~~对评论的回应：~~

~~哦，没看到它被修复了。在这种情况下，不要打扰浮动内容div，只需在其上设置一个右边距，以防止它进入菜单下。~~

好吧，不确定这是否是最好的方法，但基本上，保证金成为保证金合并规则的牺牲品。填充似乎有效。

#frame { position:absolute; padding-right:15em } #content { } #menu { position: fixed; right:0; width:13em }

Answer 2

这是一个名为min-width的CSS属性。这将防止对象小于最小宽度。 IE不支持它，但有JS hacks来确保它。

Answer 3

删除float: left - 因为你没有在你想要漂浮在它旁边的div之后有任何内容（因为那个内容是position: fixed）你不需要浮动（或其相关联）收缩包装）。

您只需担心MSIE6（不支持position: fixed），但您可以通过在MSIE6中的position:a absolute上设置#menu来解决此问题（使用条件注释或CSS劈）。

Answer 4

内容的宽度是基于％的（隐式）
菜单的宽度和边距是基于em的

由于css不允许宽度：100％-17em之类的东西来获得你想要的行为（不使用js），所以也要使用％-values作为菜单。但是，这会根据窗口大小增加/缩小菜单及其边距......

#content {
    border:1px dashed red;
    float:left;
    margin-right:2%;
    width: 78%;

}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    width:20%;
}

希望这有帮助。

Answer 5

谢谢大家的建议，他们指出了我正确的方向。它实际上最终变得比我想象的更简单。我删除了float:left和position: absolute。以下CSS完全符合我的要求：

新CSS：

#frame {
    border:2px solid red;
}

#content {
    border:1px dashed red;
    margin-right:15em;
}

#menu {
    position:fixed;
    border:1px dotted blue;
    right:0;
    top: 1em;
    width:13em;
}

在我尝试不同组合的过程中，position: absolute;进入了我的#frame选择器并且它正在抛弃它。

以上内容如下：

右侧的固定位置和宽度菜单
左侧的内容div使用剩余宽度
内容div即使未填充文字

这并不能说明上面提到的IE6缺乏工作position: fixed;，但我可以使用IE6破坏选择器黑客来替代它。

如何使浮动<div>使用其最大宽度</div>

5 个答案: