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

第一感觉是准备用 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. K8S 部署es，搭建efk日志收集系统

    1.k8s部署es集群:https://www.jianshu.com/p/e490f7597539 2.k8s搭建efk日志收集系统:https://www.cnblogs.com/minseo/p ...

  2. .NET CORE 控制台程序在CentOS 7 后台运行指令

    1.后台运行服务 >/dev/null & 不输出任何信息 & 记录控制台所有信息 记录错误信息 :/dev/null 2>log & 指令:nohup XXX.d ...

  3. CentOS 7 yum安装MongoDB

    1.配置MongoDB的yum源 cd /etc/yum.repos.d vim mongodb-org-6.0.repo 2.添加下载配置文件(这里使用阿里云的源),保存退出 [mngodb-org ...

  4. Centos.JAVA 环境安装

    JAVA 环境安装 0x00.环境准备 OS CentOS JDK1.8 安装包 jdk-8u131-linux-x64.tar.gz 0x01.卸载自带的open jdk 执行rpm -qa | g ...

  5. 发现一个API接口自动化测试平台

    gitee地址:https://gitee.com/season-fan/autometer-api 记录一下: 1.API测试平台的5个需求: ①支持不同的项目,不同的角色,技术人员多人协作 ②支持 ...

  6. python查找文件、移动、重命名、压缩

    在文件同级目录下存在sourcefile.targetfile两个文件夹,源文件放在sourcefile import os import shutil Apath = os.path.dirname ...

  7. RabbitMQ Linux安装与启动服务

    本文转载自 https://blog.csdn.net/chengmin123456789/article/details/124710277 1.先下载 erlang-23.2.3-1.el7.x8 ...

  8. 蓝牙mesh组网实践（常见调试问题整理）

    目录 ①初始化及配网过程中出错 ②发送模型返回错误代码 ③发送方成功,接收方丢包 ①初始化及配网过程中出错 1-1.返回错误代码-16,表示给dataflash分配的单个扇区的空间不够,需要加大CON ...

  9. if语法案例

    if语法案例 1. 判断系统剩余内存 1) 脚本正文 2) 执行结果 2.监控web和数据库的方法 1) 端口监控 2) 进程监控 3) 客户端模拟 4) 数据库判断* 3.mysql数据库检测命令演 ...

  10. pycharm 连接服务器进行操作比 Xshell 更简单！

    一.SSH 连接 pycharm 中通过 SSH 连接服务器非常的简单,只需要简单的几步操作就能完成,如下图 1.第一步:点击开启 SSH 会话 2.第二步:填入对应的连接信息,点击 OK 3.这个时 ...