(转)Div + CSS 高度自适应解决方案

自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同，但这些都不是最好的办法，我认为…

下面介绍采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法

主要代码：

#wrap{overflow:hidden;} /*外容器*/
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} /*列*/

完整例子代码：

css 代码

#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}

 

html代码

<div id="wrap" style="width:300px; background:#FFFF00;">
<div id="sidebar_left" style="float:left;width:100px; background:#FF0000;">Left</div>
<div id="sidebar_mid" style="float:left;width:100px; background:#666;">
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
</div>
<div id="sidebar_right" style="float:right;width:100px; background:#0000FF;">
Right
</div>
</div>

分享到：

(转)使用 JSON 进行数据传输 | (转)label标签的使用

• 2007-04-06 14:34
• 浏览 3881
• 评论(0)
• 查看更多

相关推荐

研究了一下div+css的高度自适应问题

这篇文章将讨论 div + CSS 高度自适应问题的解决方案和实现方法。 问题描述 在 HTML 中，我们经常需要实现上下两个 div 元素高度自适应的问题，即上面的 div 元素具有固定高度，而下面的 div 元素自适应剩余的高度...

Div+CSS网页样式与布局从入门到精通 实例

6. **浏览器兼容性**：了解不同浏览器对CSS特性的支持情况，适时使用前缀或选择合适的兼容性解决方案，确保在各种环境下正常显示。 7. **性能优化**：学习CSS性能优化技巧，如减少选择器的复杂性、合并CSS规则、...

div+css常见兼容性问题

在网页设计中，`div+css`是一种常见的布局方式，但它也伴随着一系列的浏览器兼容...以上就是关于`div+css`布局中常见的一些兼容性问题及其解决方案，理解并掌握这些技巧，可以有效提升网页在各种浏览器下的显示一致性。

5款经典流行div+css网站后台源码

3. **Flexbox布局**：作为现代CSS布局解决方案，Flexbox允许开发者轻松创建弹性容器，调整子元素的顺序、方向和大小，适用于一维布局，如后台界面的导航栏、侧边栏等。 4. **Grid布局**：CSS Grid是二维布局系统，...

Div+Css 好用的几个后台模板

7. 高级特性：CSS3引入了许多新特性，如 Flexbox（弹性盒子）和 Grid（网格布局），它们提供了更强大的布局解决方案，可以轻松实现复杂的多列布局和自适应设计，这在后台模板中尤为实用。 8. 性能优化：在使用后台...

华丽设计DIV+CSS+JQuery模板

总结来说，“华丽设计DIV+CSS+JQuery模板”是网页设计的一个综合示例，它体现了前端开发的三大核心技术的结合，提供了美观、交互性强的网页解决方案。通过理解并掌握这些技术，开发者能够创建出吸引用户、功能丰富的...

50例DIV+CSS模板

在“50例DIV+CSS模板”中，我们能看到多种不同类型的网页布局解决方案，涵盖了从固定宽度到自适应宽度的各种需求。 首先，固定宽度CSS版式布局是传统的网页设计方法，它设定了一个固定的页面宽度，如960像素或1200...

DIV+CSS完美布局

- **常见错误**：了解常见的CSS布局错误及其解决方案，如浮动元素引起的布局错乱、盒子模型计算错误等，有助于提高布局的准确性和稳定性。 总之，DIV+CSS布局是一种强大的网页设计技术，它不仅能够实现更美观、更...

160个div+css模板

通过深入学习和实践这些div+css模板，你不仅可以提升自己的前端开发技能，还能积累大量实际设计案例，为你的项目提供灵感和解决方案。记得在学习过程中不断实践，尝试修改和扩展模板，这样可以更好地理解和掌握Div+...

div+css 网页布局教程+例题...

此外，`flexbox`（弹性盒布局）和`grid`（网格布局）是`CSS3`引入的现代布局模式，提供了更强大和灵活的布局解决方案。`flexbox`主要用于单行或单列布局，可以轻松实现对齐、自适应和弹性伸缩。而`grid`布局则更适合...

DIV+css学习 精通CSS实例

5. 弹性布局（Flexbox）：现代CSS布局解决方案之一，可以轻松实现对齐、填充和响应式设计。 6. 网格布局（Grid）：另一个强大的布局工具，特别适用于创建二维网格系统，如网页布局。 在每个实例中，你将学习如何...

div+css布局大全教程 pdf格式

因为每个浏览器对CSS的解析和实现可能存在差异，开发者需要了解这些差异并采取相应的兼容性解决方案，如使用前缀（-webkit-、-moz-、-ms-等）、优雅降级（为旧版本浏览器提供基本功能）和渐进增强（为现代浏览器添加...

div+css布局大全

现代CSS引入了Flexbox（弹性盒模型）和Grid（网格布局），提供更为强大的布局解决方案。Flexbox适用于一维布局，如导航栏、页脚等，而Grid则适用于二维布局，可以轻松创建复杂、响应式的网页布局。 六、实践应用 在...

DIV+CSS布局大全

#### 十二、网页设计DIV+CSS——第10天: 自适应高度 ##### 自适应高度技术 - **技术实现**：深入探讨如何让元素的高度根据内容自动调整。 #### 十三、网页设计DIV+CSS——第11天: 不用表格的菜单 ##### 替代方案 - ...

div+css模板布局 右侧固定，左侧自适应

本知识点主要围绕"div+css模板布局 右侧固定，左侧自适应"这一主题展开。 在这样的布局模式中，右侧通常设置为一个固定宽度的区域，无论浏览器窗口大小如何变化，其宽度始终保持不变，常见于侧边栏、导航菜单等元素...

div+css静态文章模板（兼容火狐，IE6，IE7）

三、浏览器兼容性问题与解决方案 1. IE6/IE7兼容性：这两个老版本的IE浏览器对CSS的支持有限，存在一些特有的渲染问题，如盒模型差异、浮动元素清除、透明度处理等。解决方法包括使用条件注释提供特定于IE的样式，...

Div+CSS布局大全

Bootstrap等框架提供了现成的响应式解决方案。 8. **优化与性能**：优化Div+CSS布局时，要考虑代码简洁性、减少重绘和回流、合理使用继承和层叠原则，以及优化网络资源加载，如使用CSS Sprites和延迟加载。 9. **...

Div+CSS 3.0网页布局案例精粹

3. **定位和布局**：如弹性盒模型`flexbox`和网格布局`grid`，提供了更强大的流式布局解决方案。 4. **响应式设计**：媒体查询`@media`允许根据设备特性和视口大小调整样式。 5. **文本和字体**：包括文本阴影`text-...

div+CSS 网页布局教程.网站开发,网页制作

4. **Grid网格布局**：为创建复杂的网格系统提供了一种强大的解决方案，特别适合布局复杂的页面。 三、div+CSS布局实战： 1. **实现多列居中**：利用`margin: auto`或者`display: flex; justify-content: center; ...