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

2023年6月5日 272次阅读

我有一个问题,我在我看过的各种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？

最佳答案 您可能会考虑这样做：

<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的百分比.

点赞