html - 带有可选侧边栏的流动内容 div

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 来做到这一点——也许对内容边距使用“自动”——而不依赖 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%；”确保菜单和内容框拉伸(stretch)到相同的高度。如果需要，您还可以将其设置为像素或 em 数量或小于 100 的百分比。