`

CSS教程--解决列高度自适应的五种方法

CSSASP浏览器JavaScriptXHTML 
阅读更多

1.背景图填充

这是使用最广泛的一种做法，无hacks，推荐使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD <a href="http://www.yaohaixiao.com/default.asp?cateID=3" target="_blank">XHTML</a> 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(列高度相同的方法)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
background:#E7DFD3;
}
#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}

#header,#footer{
background: #E8E8E8;
width: 750px;
text-align:center;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}

#footer{
clear:both;

}
h1,h2,address,p{
margin: 0;
padding: .8em;
}
h1,h2{font-size: 20px;}

</style>
<script type="text/javascript">
// <![CDATA[

function toggleContent(name,n) {
var i,t='',el = document.getElementById(name);
if (!el.origCont) el.origCont = el.innerHTML;

for (i=0;i<n;i++) t += el.origCont;
el.innerHTML = t;
}

// ]]>
</script>
</head>
<body>

<div id="header">
    <h1>Head</h1>
<div id="middle">
<div id="sideright">
<div id="sideleft">
    <h2>sideleft</h2>
<p><a href="javascript:toggleContent('sideleft',1)">默认长度</a> <a href="javascript:toggleContent('sideleft',2)">加长页面</a></p>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
</div>

    <h2>sideright</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
</div></div>
<div id="footer">
    <address>
      Footer
    </address>
    <p>制作：<a href="<a href="http://www.yzci.com/" target="_blank" rel="external">http://www.yzci.com/</a>">Yzci.Com</a></p>
</div>
</body>
</html>
4.采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。hacks比较多（主要是opera的），但容易使用，推荐：
<!DOCTYPE html PUBLIC "-//W3C//DTD <a href="http://www.yaohaixiao.com/default.asp?cateID=3" target="_blank">XHTML</a> 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+<a href="http://www.yaohaixiao.com/default.asp?cateID=3" target="_blank">CSS</a>布局中自适应高度的解决方法)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
text-align: center;
background:#E7DFD3;
}
#wrap{
width: 750px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: #E8E8E8;
}
#sideleft{
width: 580px;
float: left;
background: #FFF;
text-align: left;
}
#sideright{
width: 170px;
float: left;
background: #F0F0F0;
text-align: left;
}
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/
#footer{
background: #E8E8E8;
width: 100%;
float: left;
}
h1,h2,address,p{
margin: 0;
padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
    <h1>Head</h1>
</div>
<div id="sideleft">
<h2>sideleft</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
  
</div>
<div id="sideright">
<h2>sideright</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
</div>
<div id="footer">
    <address>
    Footer
    </address>
<p>制作：<a href="<a href="http://www.yzci.com/" target="_blank" rel="external">http://www.yzci.com/</a>">Yzci.Com</a></p>
</div>
</div>
</body>
</html>

分享到：
| 表格隔行变色并悬停变色 兼容IE FF
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vuewaterfall瀑布流插件自适应PC移动端无需预设置高度

    4. 可以通过组件的属性和方法来定制瀑布流的行为，例如设置列数、间距、加载更多功能等。 5. 实现懒加载功能，可以通过监听滚动事件，结合VueWaterfall提供的API判断是否需要加载更多内容。 6. 最后，确保在CSS中...

    div+css 教程

    《div+css 教程》是一本专门为网页设计师和开发者准备的实用教程，旨在帮助读者从传统的表格布局过渡到更为灵活、高效的div+css布局方式。在这个数字化时代，网页设计的技术日新月异，div+css已经成为现代网页设计的...

    DIV+CSS教程系列

    在"Div+CSS教程"中，你将学习到这些概念的实际应用，通过实践案例和练习，提升你的网页设计能力。无论是初学者还是有经验的开发者，本教程都将帮助你更好地理解和掌握`DIV+CSS`，从而构建出美观且功能强大的网页。

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

    5. **列高度自适应**：如Faux Columns技术，利用背景图片实现等高列布局，解决不同内容量时列高度不一致的问题。 四、优化技巧： 1. **选择器优化**：避免使用过于复杂的选择器，以减少解析时间。 2. **CSS重置**：...

    CSS教程

    - **Flexbox**：弹性盒子模型，为复杂的一维布局提供解决方案，如对齐和自适应排列。 - **Grid**：网格布局系统，适用于二维布局，使元素在行和列中的定位更灵活。 **5. CSS预处理器** - **Sass** 和 **Less**：...

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）.zip

    响应式Web开发是一种现代网页设计方法，旨在提供跨设备、跨屏幕尺寸的无缝用户体验。它主要依赖于HTML5、CSS3以及一些响应式框架，如Bootstrap，来创建能够自适应不同分辨率和设备的网站。本教程是针对这些关键概念...

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

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

    DIV+css学习 精通CSS实例

    3. 浮动（Float）：浮动常用于创建多列布局，但也有其局限性，如元素高度塌陷问题。 4. 定位（Positioning）：包括static、relative、absolute和fixed等定位方式，其中相对定位和绝对定位是实现复杂布局的关键。 5...

    DivCSS布局入门教程和Div+CSS_布局大全

    层叠布局解决了多列问题，但可能产生浮动元素导致的父元素高度塌陷问题；定位布局适合精确控制元素位置，但需要手动计算坐标；而弹性盒和网格布局则提供了更强大的自适应能力。 在学习Div+CSS布局时，你需要理解每...

    DIV+CSS 网站布局实录

    4. **浮动与清除**：浮动元素常用于创建多列布局，而清除浮动则解决了因浮动导致的父元素高度塌陷问题。 5. **Flexbox** 和 **Grid** 布局：这两种现代布局模型提供了更为灵活的排版方式，能处理复杂的多列和对齐...

    CSS经验几则.rar

    模块化工具如BEM（Block Element Modifier）方法或SMACSS（Scalable and Modular Architecture for CSS）可以帮助保持代码整洁。 文件“CSS经验几则.doc”很可能是这些知识点的具体实践案例或深入讲解，而“下载...

    css+div培训资料

    【CSS+Div基础教程】 CSS（层叠样式表）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将样式（颜色、字体、布局等）与结构（HTML元素）分离，使得网页设计更加灵活...

    div_css布局.rar

    本教程将深入探讨Div+CSS布局的原理、技巧以及常见问题解决方法。 一、Div元素的理解与应用 Div元素是一个无语义的容器，通常通过CSS来赋予其特定的样式和布局。通过设置宽度、高度、边距、内边距等属性，可以创建...

    html+js+css固定表格行列

    然而，这种方法在处理表格列宽自适应和垂直滚动时可能存在问题。为了解决这些问题，我们可以使用JavaScript（如jQuery库）来动态调整列宽和表格高度。首先，我们需要获取表头和数据行的宽度，然后将其应用于对应的...

    div+css布局大全

    4. **Flexbox布局**：随着技术发展，Flexbox（弹性盒布局）成为更现代的布局解决方案，可以轻松实现一维布局（行或列），自动对齐，自适应大小分配等功能。 5. **Grid布局**：网格布局系统（Grid）则为二维布局提供...

    css权威指南 第3版 中英文

    《CSS权威指南》第三版是CSS学习者...总结，《CSS权威指南》第三版是一本全面而深入的CSS教程，无论是初学者还是经验丰富的开发者，都能从中受益。通过阅读和实践，你可以系统地学习CSS，并提升网页设计和开发的能力。

    Metro风兼瀑布流布局效果

    “瀑布流”布局则是指一种自适应的网页布局方式，其中内容按列垂直排列，每列高度不一，形似瀑布。当用户滚动页面时，新的内容会自动加载并填充空白区域，为用户提供流畅的阅读体验。将这两种设计元素结合，能够创造...

    CSS教程:用dl dt dd来制作列表

    为了解决这些问题，他们选择了使用`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;`元素，因为这种方法可以更好地进行布局，便于未来扩展，并且需要的CSS样式更少。 布局结构如下： ```html 标题 &lt;dt&gt;&lt;a href="#"&gt;·博客里的文章是...

    websphere portal

    ### IBM WebSphere Portal 主题与皮肤开发教程概览 #### 一、初级入门：PORTAL的主题与皮肤开发 本章节将介绍如何进行WebSphere Portal的基本主题与皮肤开发，包括一些核心文件的理解和编辑。 1. **Default.jsp**...

Magicbox
Global site tag (gtag.js) - Google Analytics