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不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
随机推荐
- Docker的ubuntu镜像安装的容器无ifconfig和ping命令的解决
Docker的Ubuntu镜像安装的容器无ifconfig命令和ping命令 解决: apt-get update apt install net-tools # ifconfig apt ...
- PHP 装饰器模式
装饰器模式:是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能. [装饰器模式中主要角色] 抽象组件角色(Component):定义一个对象接口,以规范准备接受附加责任的对象,即可以给这 ...
- Console.In.ReadToEnd() 控制台 输入完毕
输入完数据后 按回车(另起一行) ctrl+z enter .......百度了半天 没百度到..最后还是google 强大..解决了问题 ..
- Atitit.eclise的ide特性-------abt 编译
Atitit.eclise的ide特性-------abt 编译 为什么要在Intellij IDEA中使用Eclipse编译器 如果你使用Intellij Idea,你应该考虑使用Eclipse编译 ...
- Singleton(单例模式)的一种实现 -- 基于【惰性】适用于【大对象】的一种生产实践
一.说明 本文中的代码类,在生产中使用了很长的时间,曾应用于多个企业多个项目实践中,其中也踩了不少坑,总结了一些适用的业务情景, 重要的事情说三遍: a.本代码类不是万能药,不要在业务情景中滥用! b ...
- Atitit 游戏的原理与概论attilax总结
Atitit 游戏的原理与概论attilax总结 1. 游戏历史2 1.1.1. 盘点PC游戏史上最重要的50款游戏2 1.1.2. 回味人类文明进程 五款经典的历史游戏2 2. 游戏类型(主要分为6 ...
- 基于JQuery的获取鼠标进入和离开容器方向的实现
做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...
- Log4j记录日志步骤
记录日志对调试Bug很有帮助 亲身体会 个人习惯用Log4J,大家可以在apache网站:jakarta.apache.org/log4j 可以免费下载到Log4j最新版本的软件包. Log4j支持 ...
- Android 开源库和项目 2
1.带尾巴的RecyclerViewPager 特点:1.像viewPager一样滑动一次就滑动一页 2.像画廊gallery一样,滑动一次可以滑动很多页 3.竖向滑动 4.支持点击事件,没有错乱 ...
- linux shell程序
shell程序介绍 1.查看我们的Linux(centos6.5为例)有多少我们可以使用的shell: [root@localhost bin]# cat /etc/shells /bin/sh /b ...