高度自适应问题,我很抵触用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 { background-color : #999 ;
height : 100% ;
} |
需求2 也很容易:
#nav { background-color : #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 { background-color : #999 ;
height : 100% ;
} #nav { background-color : #85d989 ;
width : 100% ;
height : 50px ;
float : left ;
} #content { background-color : #cc85d9 ;
height : 100% ;
} |
这里利用了浮动,最后的结果仅仅是看着没问题,当然了,如果你只是简单的展示文本和图片,这种方法已经够用了,但是如果你想用js做点交互,比如#content内部有个需要拖拽的元素,它的top最小值肯定不能是0,否则就被#nav挡住了,悲剧的是我就有这种需求,于是继续苦逼的试。
经过一天的尝试,加上高人指点,终于有解了,泪奔啊
#nav { background-color : #85d989 ;
width : 100% ;
height : 50px ;
} #content { background-color : #cc85d9 ;
width : 100% ;
position : absolute ;
top : 50px ;
bottom : 0px ;
left : 0px ;
} |
重点是要top和bottom一起使用,这是很反常规的用法,可以强制定义盒模型的区域,神奇啊
相关推荐
鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css <style> .layui-table-cell{ display:table-...
这样写的话,当容器内内容很多的时候是没有问题的,可以达到预期的效果,但是如果容器内内容比较少,不足以撑起足够的高度的话,这个CSS 样式实际上是没起作用的。那要怎么解决这个问题呢? 让容器高度充满这个屏幕 ...
如何用js加css控制div自适应高度问题完美解决方法
今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! 复制代码代码如下: <...
CSS 一、ASP.NET 2.0中CSS失效的问题总结 二、CSS制作圆角边框 三、常用的CSS BUG解决方法与技巧 四、CSS常用的一些小技巧 五、firefox无法显示背景...(1) [原创]iframe高度自适应(多种情况、FF\IE系统全兼容)
以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
CSS+ div 布局经常遇到的几个问题,刚好给新学员上课整理的实例代码。分享下: 1.border问题。 2.高度自适应问题及IE6min-height问题的解决 3.padding和margin的区别 4.margin加倍问题
8.13.3 自适应高度的兼容 8.13.4 实例制作中的兼容问题 第9 章 一个英文网站的制作 9.1 分析效果图 9.2 切图 9.2.1 制作首页的切图 9.2.2 二级页面的切图 9.3 制作站点首页头部 9.3.1 首页头部的信息和基础样式的...
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中都能通过验证。...
2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后,下边的容器跟着浮动,造成页面错乱 当子元素浮动且未知高度时,怎么使父容器适应子元素的高度? 相对定位与...
那就是左右两列怎么样实现背景高度自适应,及左边内容高于右边时,右边背景色也要和左边一样;右边内容高于左边时,左边背景色也要和右边一样; 当年为了实现这个,我在网上查过无数的文章,都没有很好的解决方案;...
红框标注的即是我在上面高度比例固定的范围内宽度自适应的效果; css代码: .content { margin: 0 auto; height: 79vh; .video_box { position: relative; height: 100%; overflow: hidden; margin: 0 auto;
在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳,并讲解了完整的解决方法,主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和...
第一种方法: 关于这个布局,作者是这样说明的:“left和right都贴住左侧。...如有牛人知道解决方法,望留言解答。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w
自适应高度的滑动背景图片及背景图片设置技巧; ?如何解决IE6双倍边距bug; ?认识IE6、IE7特定选择器; ?margin-bottom失效情况的解决; ?将icon图标集成于一个图片文件; ?设置链接变换小图标的样式; ?一张...
上例中有包含不同内容的 3 列,可以看出存在的问题是列的背景色随着其包含内容的高度而自适应展开。这是我们要解决的问题。如何使所有的列等高?或具体的说,如何使所有列的高度等于最高列的高度?这很棘手,因为...
一、网格简史 曾几何时,我们的布局是一团糟。...CSS2规范中用浮动解决列的方法存在一个问题。为了防止父元素破环你的布局,我们需要添加clearfix。通过这种方法,来修正父元素的高度坍塌问题(浮动
今天有位朋友一早转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右侧自适应屏幕宽; 左右两列,...
昨晚群里一个朋友帮忙解决的问题,之前没有遇到过,题目如下: 不改变html结构,使导航菜单垂直水平居中,导航宽度自适应屏幕100%,高度30px;单项高度28px,宽80px; 兼容:ie6+,ff,chrome,opera等主流浏览器。 ...