html中dl块自适应高度,CSS高度自适应代码(用了都说好)
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特效代码以及常用软件下载等,做有质量的学习型源码下载站。
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高度自适应代码(用了都说好)相关推荐
- php自适应浏览器,css如何自适应浏览器
css自适应浏览器的设置方法:首先打开相应的代码文件:然后使用js代码" jQuery(window).resize(function(){...}"实现内容自适应浏览器宽度或者高 ...
- css自适应图片样式,css怎么让图片自适应?css图片自适应大小的方法介绍
对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的 ...
- IE6 中的最大最小寬度和高度 css 高度 控制(兼容版本)
/* 最小寬度 */.min_width{min-width:300px;/* sets max-width for IE */ _width:expression(document.body.cli ...
- css 图片大小自适应div,CSS 图片自适应显示宽度
这个使用尤其中手机屏幕上最有用. 有喜欢方法: function ReImgSize(){ for (j=0;j { document.images[j].width=(document.images ...
- css什么是自适应布局,css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
- css 大图保持宽高比压缩,CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...
- html中高度自动调整,css高度自适应如何实现?css高度根据内容自适应的简单方法...
在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应. PS:css宽度自适应的介 ...
- css高度自适应以及高度塌陷总结
高度塌陷: 场景:子元素有浮动,父元素没有设置高度或者设置最小高度,父元素会出现高度塌陷 高度塌陷的解决方法: 1.给高度塌陷的元素设置:overflow:hidden(原理:因为overflow:h ...
- html中定义高度的属性是什么,height【css 高度】属性教程
css height[css 高度]height属性 DIV CSS高度height属性教程 height翻译成中文也是高.高度意思.在CSS样式中高度样式设置也是height来布局.几乎每个网页布局 ...
最新文章
- corosync+pacemaker+crm简单配置
- ucosii事件控制块------消息邮箱与消息队列
- Android源码项目目录结构
- H3C无线 AC网关式部署无线开局(WEB版)
- datalength,求字符串的字节数
- python tornado websocket_Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法...
- 充满男性荤段子的开源软件 DICSS 引发争议
- CMU和谷歌联手放出XL号Transformer!提速1800倍 | 代码+预训练模型+超参数
- 一致代价搜索_58搜索效率优化平台建设实践
- 足球大数据分析大小球胜平负的技巧与经验实例附分析软件
- 工具类 --UUIDUtil ---32位UUID生成器
- linux安装/卸载microsoft edge
- 如何给客户做产品培训
- MySQL必知必会——实践习题
- 用计算机弹平凡之路谱子,pen beat曲谱_penbeat平凡之路的谱子
- DB2日期函数DATE函数
- 流体动力学—迹线和流线
- 栈的详解(C/C++数据结构)
- colorkey唇釉是否安全_colorkey唇釉孕妇可以用吗 colorkey唇釉可以用多久
- 电流源(镜像电流源、比例电流源、微电流源、加射极输出的镜像电流源、威尔逊电流源、多路电流源)