关于 html:带有可选侧边栏的流动内容 div

Fluid content div with optional sidebar

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

我正在开发一个使用基本流动/固定两栏布局的网站。该站点的内容在左侧 div 中,在右侧的侧边栏中。侧边栏固定宽度为 200 像素左右,内容扩展填充父级的剩余宽度。

代码如下:

1
2
3
4
 <!-- site container -->
   Content goes here.
   Menus goes here.
    <!-- float-clearer div -->

这是一种非常标准的方法,在大多数情况下都可以正常工作,但问题是网站的设计要求侧边栏仅在某些情况下出现。所有的 HTML 都是通过 PHP 生成的,"get-content()"函数不知道"get-sidebar()"函数是否会被调用。

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

有没有办法用 CSS 做到这一点——也许使用 "auto" 作为内容边距——而不依赖 PHP/JavaScript?


你可以考虑这样做:

1
2
3
4
5
6
 <!-- site container -->
   
        Menus goes here.
        Content goes here.
   
     <!-- float-clearer div -->

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

"height:100%;" 确保菜单和内容框拉伸到相同的高度。如果需要,您还可以将其设置为像素或 em 数量或小于 100 的百分比。


是否可以使用 PHP 将类添加到正文中?根据上下文,类似于 "one-col" 或 "two-col" 的东西。然后你可以在有侧边栏时给内容 div 一个边距,但在没有侧边栏时不能。


不要浮动侧边栏,试试这个:

1
2
3
4
5
6
7
8
#sidebar {
  display: inline-block;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}