CSS解决高度自适应问题
高度自适应问题,我很抵触用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的高度也变成了300px,出现了需求不允许的纵向滚动条。
当然,用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一起使用,这是很反常规的用法,可以强制定义盒模型的区域
相关推荐
div+css高度自适应div+css高度自适应div+css高度自适应div+css高度自适应
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
2列左窄右宽高度自适应且未知高度底部平齐、型+头部+导航+尾部 CSS模板
demo包括: 1、多个div并排,宽度自适应100% - 左右两侧div宽度固定,中间DIV占满剩余区域 ; 2、多个div,高度自适应100% - 页面布局:头,身体,脚,占满整个屏幕;
link rel="stylesheet" href="css/base.css?3.1.64"> <!--初始化文件--> <link rel="stylesheet" href="css/menu.css?3.1.64"> <!--主样式--> </head> <body> <!--...
如何使整个页面内容居中,如何使高度自适应内容自动伸缩,这是学习CSS布局最常见的问题。 下面给出一个实际的列子,附详细说明。 首先可以将下列代码复制到html文件中运行一下,在mozilla、opera和ie浏览其中,均...
初学者div+css:Tab页自适应,简单易上手
2列左窄右宽、高度自适应+头部+导航+尾部 css模板
对象height:100%并不能直接产生效果,是因为跟其父对象有关,下面有个示例为大家详细介绍下,感兴趣的朋友可以参考下
可以适应各种终端设备各种分辨率,如手机,平板,PC,自动会调整到最佳显示排版效果。
用JS+CSS来实现DIV层自适应高度,无论你的浏览器大小如何变化都会自适应高度, 调节宽度同样的道理
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条....首先,原则上实现textarea自适应必须适用css,不能直接适用“width=100%”这样的写法,具体示例: 复制代码代码如下: <style> textarea {
这样写的话,当容器内内容很多的时候是没有问题的,可以达到预期的效果,但是如果容器内内容比较少,不足以撑起足够的高度的话,这个CSS 样式实际上是没起作用的。那要怎么解决这个问题呢? 让容器高度充满这个屏幕 ...
高度基于标准CSS API的自适应React Flexbox(CSS灵活框布局模块)网格系统。 特征 简单API基于 ,无需学习新语法。 使用自定义生成的组件样式 根据响应断点轻松更改网格设置 安装 yarn add react - flexa 用法 ...
第一张图用于高度自适应,第二张用于宽度自适应。如果觉得不够高或宽,可以修改图片。实现的方法很简单,其实就是套2层,其中外层用长背景,内层用短背景盖住。拿高度自适应来说,可以用一个div(用长背景居底铺)...
在自己写demo的过程中,想使用display:flex实现垂直居中,代码如下: <style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center;.../sty
非常简单的自适应高度效果,无需js
研究了一下div+css的高度自适应问题
鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css <style> .layui-table-cell{ display:table-...