Fluid content div with optional sidebar我有一个问题在我看过的各种 CSS 布局模型中没有找到，所以我想我会在这里发布。我正在开发一个使用基本流动/固定两...
我有一个问题在我看过的各种 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; } |
沃梦达教程
本文标题为：关于 html：带有可选侧边栏的流动内容 div
基础教程推荐
猜你喜欢
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- 第7天:CSS入门 2022-11-04
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- Vue+WebSocket实现在线聊天 2023-10-08
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- vue的 Mixins (混入) 2023-10-08
