div高度自适应填充剩余部分
在乐学一百的开发过程中,遇到了一个小乐Fm开发,需要跟百度fm差不多,上边一个条,下边一个条,中间部分填充。但是还不能固定高度,因为屏幕的宽高都不一样。。。
height:100%是不可行的。
搜了一圈,发现了一个比较好的解决方法,分享一下:
感谢作者:原文链接
高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用CSS,难度不小,比如下面我要说的例子。
需求:
1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条
2. 绿色部分高度固定,比如50px
3. 紫色部分填充剩余的高度
HTML结构暂且如下:
<div id="main"> <div id="nav">nav</div> <div id="content">content</div> </div>
先看1.
html, body { height: 100%; margin: 0px; padding: 0px; }
#main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">999; height: 100%; }
需求2 也很容易:
#nav { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">85d989; height: 50px; }
需求3 是最让人头痛的,一般我们都会想到height:100%, 但是100%是以父元素的高度为准的,比如父元素的高度是300px,#nav占去了50px,#content理应是250px,但是写成height: 100%,结果就是#content的高度也变成了300%,出现了需求不允许的纵向滚动条。
当然,用js解决这种问题是相当简单的,但是这次我就是不想用js,下面就来试吧:
这个需求真的让我非常崩溃,看似简单,换了n种方式都觉得不靠谱,最后找到一种最接近理想效果的方法,如下
html, body { height: 100%; margin: 0px; padding: 0px; } #main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">999; height: 100%; } #nav { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">85d989; width: 100%; height: 50px; float: left; } #content { background-color: #cc85d9; height:100%; }
这里利用了浮动,最后的结果仅仅是看着没问题,当然了,如果你只是简单的展示文本和图片,这种方法已经够用了,但是如果你想用js做点交互,比如#content内部有个需要拖拽的元素,它的top最小值肯定不能是0,否则就被#nav挡住了,悲剧的是我就有这种需求,于是继续苦逼的试。
经过一天的尝试,加上高人指点,终于有解了,泪奔啊
#nav { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">85d989; width: 100%; height: 50px; } #content { background-color: #cc85d9; width: 100%; position: absolute; top: 50px; bottom: 0px; left: 0px; }
重点是要top和bottom一起使用,这是很反常规的用法,可以强制定义盒模型的区域,神奇啊
div高度自适应填充剩余部分的更多相关文章
- 四种方法解决DIV高度自适应问题
本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...
- div高度自适应(总结:min-height:100px; height:auto;的用法)
对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...
- winform中dataGridView高度自适应填充完数据的高度
// winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度是根据数据的多少而变动. 在load的时候,数据绑定后,加上如下代码: ...
- CSS实现div高度自适应
1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...
- DIV高度自适应及注意问题(转)
本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...
- div高度自适应
第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
- div高度自适应的问题
对象height:100%并不能直接产生效果,是因为跟其父对象有关. #center{height:100%;} 上面的css样式是无效的,不会产生任何效果. 需要改写: html,body{ m ...
- div 自适应高度 自动填充剩余高度
方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...
随机推荐
- 升级到tomcat7.0碰到的问题
今天把tomcat从6.0.18升级到7.0.25,发现了两个问题 问题1 java.lang.ClassNotFoundException: org.apache.catalina.mbeans.S ...
- 漂亮的自制java验证码
网上有很多开源的验证码插件,例如jcaptcha,kaptcha等等...这些都不错,不过感觉用起来不太舒服,最后还是网上找了个原型的,然后在这个基础上修改下,效果还算不错,凑合用下,验证码要做到难以 ...
- dojo(四):ajax请求
储备知识 1.在介绍新版本的ajax请求之前,需要先了解一些dojo/Deferreds. 初次听到“Deferred”这个概念,可能会觉得这是一个神秘的东西.实际上它在执行异步操作的时候非常强大,例 ...
- 图像的稀疏表示——ScSPM和LLC的总结
前言 上一篇提到了SPM.这篇博客打算把ScSPM和LLC一起总结了.ScSPM和LLC其实都是对SPM的改进.这些技术,都是对特征的描述.它们既没有创造出新的特征(都是提取SIFT,HOG, RGB ...
- android利用zbar二维码扫描-(解决中文乱码及扫描区域定义)
写在最前(这是对上一篇博文的问题做的更新[android利用zbar二维码扫描]) project下载 zbarLib编译project project下载0积分 bug 在2.3的系统中Hol ...
- win10.10 激活
最近几天一直有同学来找我说,为什么用密钥或kms神龙版都无法激活win8/8.1.win10,于是我就让这些同学给我截图,结果他们激活出错的信息基本都一样,都是错误:“0XC004F074 软件授权服 ...
- 火车票硬座座位位置分布图、火车座位分布图 andydao
夏天要是坐火车硬座在火车上过夜的话,最好带一个小外套,以防睡觉着凉.
- 使用TortoiseGit对Git版本进行分支操作
版本克隆分支问题 TortoiseGit在克隆分支的时候,默认克隆master分支,克隆后本地工作目录为中心器的Master分支. 克隆后本地分支 中心库分支 Push分支到中心服务器(Pushing ...
- oracle删除表语句
删除表(记录和结构)的语名delete ———— truncate ———— drop DELETE (删除数据表里记录的语句) DELETE FROM表名 WHERE 条件; 注意 ...
- java基础学习总结四(控制语句<顺序、选择、循环>、方法)
一:结构控制语句 结构控制语句分为3种,顺序语句.选择语句.循环语句. 1:顺序语句 就是自上而下的执行程序,默认执行顺序. 2:选择语句 if结构语句:如果满足条件,则执行该语句. if...els ...