问题: 一个页面分上下二部分,上部分高度是固定不变的,要求下部分高度自动占满屏幕,如何实现?

第一感觉是准备用 JS 实现。

今天发现一个用 CSS 实现的方法

position: fixed;
bottom: 10px;
overflow: auto;
left: 0px;
top: 44px;

position 说明:

http://www.w3school.com.cn/cssref/pr_class_position.asp

http://developer.51cto.com/art/201009/226526.htm

div 自动高度的更多相关文章

  1. (转载)html中div使用自动高度

    为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签:     static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...

  2. div 自动全屏高度

    最近做一个页面,需要一个div自动铺满全屏,但是高度总是难以搞定.查资料为:需要从html body到div 需要 设置 高度属性 为100%

  3. 两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走 (不加flex不自动撑开)

    两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走

  4. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

  5. DIV布局-高度不同DIV,自动换行并对齐

    最近弄了一个动态添加div框,每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 要改啊,搞不定,问了UI高手,终于给出了完美解决方 ...

  6. 并列div自动等高

    并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. Html 之自动高度 auto 和 100%高度

    HTML 高度 下面示例 设置为 Auto 和 100% <!DOCTYPE html> <html lang="en"> <head> < ...

  8. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  9. html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  10. 里面的div怎么撑开外面的div,让高度自适应

    关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...

随机推荐

  1. golang 中mgo update报错: The dollar ($) prefixed field '$inc' in '$inc' is not valid for storage.

    _, err := c.Find(bson.M{"index": index}).Apply(mgo.Change{ Upsert: true, ReturnNew: false, ...

  2. N63050 第二周运维作业

    1.显示/etc目录下,以非字母开头,后面跟了一个字母以及其它任意长度任意字符的文件或目录 1 [root@centos8 etc]#touch 5a.txt 9a.txt 2 [root@cento ...

  3. 基于Spring AOP切面实现请求入参出参加解密

    1.Mavne导入加密解密所需的依赖 <dependency> <groupId>org.apache.commons</groupId> <artifact ...

  4. P1046 [NOIP2005 普及组] 陶陶摘苹果

    题目描述 陶陶家的院子里有一棵苹果树,每到秋天树上就会结出 10 个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有个 30厘米高的板凳,当她不能直接用手摘到苹果的时候,就会踩到板凳上再试试. 现在已 ...

  5. Nginx基础篇(一)

    (一)介绍 Nginx 是开源.高性能.高可靠的 Web 和反向代理服务器,也可以作为邮件代理服务器.而且支持热部署,即几乎可以做到 7 * 24 小时不间断运行,即使运行几个月也不需要重新启动,还能 ...

  6. matlab如何关闭figure

    如果想要关闭之前打开的figure,用**close()**函数就可以了. close(H):关闭句柄为H的figure: close('name'):关闭指定name的figure: close a ...

  7. vue.js----之前端路由(二)

    上一篇我们已经把vue框架搭好了,接下来我们进行路由模块 在src目录下新建router.js 添加如下代码 1 /** 2 * Created by sioxa on 2016/10/29 0029 ...

  8. Mysql 系统参数查看

    1.查看数据库版本 select version(); 2.查看是否支持分区 show variables like '%partition%';show plugins;

  9. IaaS--云虚拟机(一)(何恺铎《深入浅出云计算》笔记整理)

    [概念讲解] 云虚拟机的体系结构,就是全面解耦的计算存储分离的设计思想. 传统的虚拟化,往往是对单一物理机器资源的纵向切割,计算.存储.网络等各方面的能力都是一台物理机的子集.因此,从可伸缩性的角度来 ...

  10. [部署日记]GO在Visual Studio Code初次运行时提示The "gopls" command is not available. Run "go get -v golang.org/x/tools/gopls" to install.

    本以为VSC在商城装上插件后就能拎包入住,F5的时候我当场好家伙 于是无脑Install... Installing github.com/nsf/gocode FAILED Installing g ...