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

第一感觉是准备用 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. form表单enctype扩展

    enctype就是encodetype就是编码类型的意思. multipart/form-data是指表单数据有多部分构成,既有文本数据,又有文件等二进制数据的意思. 需要注意的是:默认情况下,enc ...

  2. 将视图直接转换成表的SQL语句

    将视图直接转换成表的SQL语句 sqlserver: select * into tablename from viewname

  3. Mysql数据库基础第五章：（一）事务

    Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...

  4. Java实现台球游戏的动画实现相关代码

    package com.bjsxt;//scr中新建的包packageimport java.awt.*;import javax.swing.*;public class BallGame exte ...

  5. 论文阅读： CCF A 2022 MVD: 基于流敏感图神经网络的内存相关漏洞检测 （ICSE）

    Motivation: 内存相关漏洞会导致性能下降和程序崩溃,严重威胁到现代软件的安全性. 静态分析方法使用一些预定义的漏洞规则或模式来搜索不正确的内存操作,然而,定义良好的漏洞规则或模式高度依赖于专 ...

  6. React Tree树形结构封装工具类

    需要依赖 immutable,用于group by分组 buildTree 为入口方法,注意返回的是Immutable.List对象,使用需要调用.toJS()方法转为普通对象 其中 creatNod ...

  7. docker私有镜像仓库搭建（简）

    1.装包 yum install docker-registry 2.启动服务 systemctl start docker-distribution 3.打标自己的镜像 docker tag mys ...

  8. pandas-数据结构转换-纵转横

    如下代码,亲测有效,后面会附上入口以及出口数据结构截图 def test_func(file_path): """ 把pandas数据结构-dataframe,横向的索引 ...

  9. [记] OpenCV4 源码编译安装 | 记录

    OpenCV4 源码编译安装 | 记录 参考资料 官方文档:https://docs.opencv.org/4.x/d7/d9f/tutorial_linux_install.html 环境 wsl2 ...

  10. 关于JWT中RSA数据加密协议在.net中应用

    加密协议有哪些 加密协议分为对称加密和非对称加密. 对称加密就是将信息使用一个密钥进行加密,解密时使用同样的密钥,同样的算法进行解密. 非对称加密,又称公开密钥加密,是加密和解密使用不同密钥的算法,广 ...