div自适应高度
div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码:
<div id="main">
<div id="content">
</div>
</div>
当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。
我们可以通过三种方法来解决这个问题:
1增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格:
<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
2增加一个容器,在代码中存在,但在视觉中不可见:
<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
</div>
3增加一个BR并设置样式为clear:both:
<div id="main">
<div id="content"></div> <br style="clear:both;" />
</div>
引用自百度文库,作者:烟雨love2010 http://wenku.baidu.com/link?url=NiPaGqoUWLET5BIKLwpUKCzY6umX06f2AmPaliyNgC_hRsaQ59oPMi8us82qmlrKM_j_H9zKcKaQW4vF6RNE4lCTeJ6-Ebp_QunC95VgxiW
还有一个百度来的设置CSS的方法:
#div{
_height:200px;
min-height:200px;
//能兼容ie6,7,8 ,火狐等浏览器。
}
div自适应高度的更多相关文章
- Div自适应高度的方法
http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...
- div 自适应高度
自适应高度 ,设置最小高度:通常情况下,没有设置高度,div默认自适应高度且无最低高度 1 div{ _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ...
- 设置div自适应高度滚动
<body> <div id="divc" style="overflow: auto;"> </div> <a id ...
- div 自适应高度 自动填充剩余高度
方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...
- div套div 里面div有浮动 外面div自适应高度
<div style="background-color:red;"> <div style="float:left;background-color: ...
- 如何设置div自适应高度
1.给div添加overflow属性 .div{ width:760px; overflow:hidden; } 2.其他的设置height:auto 等我测试没有效果
- 外部div自适应内部标签的高度,设置最小高度、最大高度
一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...
- div有最小高度且自适应高度
DIV最小高度且自适应高度 在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
随机推荐
- java抽象类和接口
面向对象设计过程中重要的一点是如何进行抽象,即把"问题空间"中的元素与"方案空间"中的元素建立理想的一对一的映射关系.抽象类和接口便是抽象过程中的产物. ...
- 关于xml加载提示: Error on line 1 of document : 前言中不允许有内容
我是在java中做的相关测试, 首先粘贴下报错: 读取xml配置文件:xmls\property.xml org.dom4j.DocumentException: Error on line 1 of ...
- 5分钟创建一个SpringBoot + Themeleaf的HelloWord应用
第一步:用IDE创建一个普通maven工程,我用的eclipse. 第二步:修改pom.xml,加入支持SpringBoot和Themeleaf的依赖,文件内容如下: <?xml version ...
- nodejs 安装
安装nodejs进入nodejs源码./configure --prefix=/software/installed/nodemakemake install 如果configure的时候提示:WAR ...
- [FromBody]与[FromUrl]
我们都知道,前台请求后台控制的方法有get方法和post方法两种, get:只支持ulr传数据,不管你是手动把参数拼接在Url里面还是写在data里面,只要是用get方法,都会自动绑定到url里面的形 ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- 如何用代码读取Office Online Server2016的文档的备注信息
前言 在一个项目上客户要求读取office online server 2016的对文档的备注信息,如下图: 以前思路老纠结在OOS这个在线上,总有以为这个信息存储在某个列表中,其实错了,这个备注信息 ...
- Android Weekly Notes Issue #221
Android Weekly Issue #221 September 4th, 2016 Android Weekly Issue #221 ARTICLES & TUTORIALS And ...
- 使用Java实现单线程模式
我们都知道单例模式,有很多种实现方法.今天我们实现一个单线程实例模式,也就是说只能实例化该类的一个线程来运行,不允许有该类的多个线程实例存在.直接上代码: public class Singleton ...
- python-socket模块
socket server #!/usr/bin/env python # -*- coding:utf-8 -*- import socket ip_port = ('127.0.0.1',9999 ...