body {

font-family: 宋体,Arial,serif;

font-size: 12px;

COLOR: #333333;

margin:0 auto;

padding:0;

background: url(otbg.jpg) left top repeat-x;

text-align:center;}

div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; }

li{list-style-type:none;}

*{margin:0;padding:0;font:12px "宋体"}

a {blr:expression(this.onFocus=this.blur())}

area {blr:expression(this.onFocus=this.blur())}

/*top*/

#topall{width:100%;height:328px;margin:0 auto;background: url(topco.jpg) left top repeat-x;}

#toplogo{width:785px;height:99px;text-align:left;}

#topmenu{width:785px;height:49px;background: #ffcc00;}

#topbar{width:785px;height:180px;}

/*left*/

#midall{width:785px;margin:0 auto;}

#otleft{float:left;width:191px;

background: #ff0000;border-left:solid 1px #CCCCCC;border-right:solid 1px #CCCCCC;}

#left{width:191px;height:92px;}

#left2{width:191px;min-height:100px;height:auto}

/*right*/

#otright{float:right;width:590px;text-align:center;}

#location{width:572px;height:20px;text-align:right;padding:10px 18px 0 0}

#line{width:557px;height:10px;background: url(otc2_06.jpg) no-repeat;}

#line2{width:557px;height:19px;background: url(otc2_12.jpg) no-repeat;}

#titlepic{width:557px;height:49px;}

#txt{width:520px;text-align:left;line-height:180%;padding-bottom:20px;}

/*foot*/

#footer{width:785px;margin:0 auto;clear:both;background: #F7EED9;}

#fline{border:solid 2px #AE6C36;}

#fline2{border:solid 1px #ffffff;}

#ftxt{text-align:center;line-height:180%;}

模板无忧提醒:

这里的高度会随着右边高度的

增加而自动填充适应,

不信你就试试!!

这只是一段测试文字,你可以复制这段文字然后粘贴到文本框内重新运行一下,看看效果,左侧会自动适应右侧文字的增加,也就是高度自适应。

你是否能记住“模板无忧呢?”

模板无忧(mb5u.com)提供各类网页模板、视频教程、JavaScript/CSS特效代码以及常用软件下载等,做有质量的学习型源码下载站。

返回mb5u.com首页

var o1 = document.getElementById("otleft");

var o2 = document.getElementById("otright");

var h1 = o1.offsetHeight;

var h2 = o2.offsetHeight;

if(h1>h2)

o2.style.height = h1

else

o1.style.height = h2

html中dl块自适应高度,CSS高度自适应代码(用了都说好)相关推荐

  1. php自适应浏览器,css如何自适应浏览器

    css自适应浏览器的设置方法:首先打开相应的代码文件:然后使用js代码" jQuery(window).resize(function(){...}"实现内容自适应浏览器宽度或者高 ...

  2. css自适应图片样式,css怎么让图片自适应?css图片自适应大小的方法介绍

    对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的 ...

  3. IE6 中的最大最小寬度和高度 css 高度 控制(兼容版本)

    /* 最小寬度 */.min_width{min-width:300px;/* sets max-width for IE */ _width:expression(document.body.cli ...

  4. css 图片大小自适应div,CSS 图片自适应显示宽度

    这个使用尤其中手机屏幕上最有用. 有喜欢方法: function ReImgSize(){ for (j=0;j { document.images[j].width=(document.images ...

  5. css什么是自适应布局,css 自适应布局阮一峰

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  6. css 大图保持宽高比压缩,CSS实现自适应下保持宽高比

    在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...

  7. html中高度自动调整,css高度自适应如何实现?css高度根据内容自适应的简单方法...

    在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应. PS:css宽度自适应的介 ...

  8. css高度自适应以及高度塌陷总结

    高度塌陷: 场景:子元素有浮动,父元素没有设置高度或者设置最小高度,父元素会出现高度塌陷 高度塌陷的解决方法: 1.给高度塌陷的元素设置:overflow:hidden(原理:因为overflow:h ...

  9. html中定义高度的属性是什么,height【css 高度】属性教程

    css height[css 高度]height属性 DIV CSS高度height属性教程 height翻译成中文也是高.高度意思.在CSS样式中高度样式设置也是height来布局.几乎每个网页布局 ...

最新文章

  1. corosync+pacemaker+crm简单配置
  2. ucosii事件控制块------消息邮箱与消息队列
  3. Android源码项目目录结构
  4. H3C无线 AC网关式部署无线开局(WEB版)
  5. datalength,求字符串的字节数
  6. python tornado websocket_Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法...
  7. 充满男性荤段子的开源软件 DICSS 引发争议
  8. CMU和谷歌联手放出XL号Transformer!提速1800倍 | 代码+预训练模型+超参数
  9. 一致代价搜索_58搜索效率优化平台建设实践
  10. 足球大数据分析大小球胜平负的技巧与经验实例附分析软件
  11. 工具类 --UUIDUtil ---32位UUID生成器
  12. linux安装/卸载microsoft edge
  13. 如何给客户做产品培训
  14. MySQL必知必会——实践习题
  15. 用计算机弹平凡之路谱子,pen beat曲谱_penbeat平凡之路的谱子
  16. DB2日期函数DATE函数
  17. 流体动力学—迹线和流线
  18. 栈的详解(C/C++数据结构)
  19. colorkey唇釉是否安全_colorkey唇釉孕妇可以用吗 colorkey唇釉可以用多久
  20. 电流源(镜像电流源、比例电流源、微电流源、加射极输出的镜像电流源、威尔逊电流源、多路电流源)

热门文章

  1. 学Python还是Java, 7张漫画带你全面分析
  2. 2022年最新青海水利水电施工安全员模拟试题题库及答案
  3. 深度网络架构的设计技巧(三)之ConvNeXt:打破Transformer垄断的纯CNN架构
  4. AMiner 会议论文推荐第一期
  5. 什么是Gradle?
  6. 模式识别作业--人脸识别(python+PCA+pytorch神经网络)
  7. java过滤器配置白名单,万字解析!
  8. 由于启动计算机时出现了页面配置问题
  9. Linux网卡绑定(bonding)配置
  10. html图片形状,用CSS代码写出的各种形状图形的方法