Question

我有一个问题，我在我看过的各种CSS布局模型中没有找到，所以我想我会在这里发布。

我正在使用基本流体/固定双列布局的网站。该网站的内容位于左侧div中，侧边栏位于右侧。侧边栏的固定宽度为200像素左右，内容会扩展以填充父级的剩余宽度。

这是代码的样子：

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
   <div style="margin-right: 200px;">Content goes here.</div>
   <div style="float: right; width: 200px;">Menus goes here.</div>
   <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

这是一种非常标准的方法，并且大部分工作正常，但问题是网站的设计要求侧边栏仅在某些情况下出现。所有HTML都是通过PHP生成的，而“get-content（）”函数不知道是否会调用“get-sidebar（）”。

当侧边栏被调用时，我希望内容扩展以填充父div，同时为侧边栏留出足够的空间。如果没有侧边栏，则内容应展开以填充父级的整个宽度。

有没有办法用CSS做到这一点 - 也许使用“auto”作为内容边距 - 而不依赖于PHP / JavaScript？

Answer 1

您可以考虑这样做：

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
    <div style="background-color:#CCC;height:100%;">
        <div style="background-color:#444;float: right; width: 200px;height:100%;">Menus goes here.</div>
        Content goes here.
    </div>
    <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

通过这样做，菜单位于主div内部并且没有边距右边，因此当菜单消失时，文本会扩展以填充空间。

“身高：100％;”确保菜单和内容框拉伸到相同的高度。如果需要，您也可以将其设置为像素或em值或小于100的百分比。

Answer 2

不要漂浮侧边栏，请尝试以下方法：

#sidebar {
  display: inline-block;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

Answer 3

是否可以使用PHP向正文添加一个类？根据具体情况，可能会出现“one-col”或“two-col”之类的东西。然后，当有侧边栏时，你可以给内容div一个边距，但是当没有侧边栏时，你可以给它。

带有可选侧栏的流体内容div

3 个答案: