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

第一感觉是准备用 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. day11_多态&抽象类&接口

    1.多态 1.1 多态的概述(记忆) 什么是多态     同一对象,在不同时刻表现出来的不同形态. 多态的前提 有继承/实现关系 有方法重写 有父类对象的引用执行子类对象 1.2 多态中的成员访问特点 ...

  2. vue - 开发必须知道的 36 个技巧

    来源于:https://juejin.im/post/6844903959266590728  

  3. 28.yield return 语法

    一.yield return 该语句可以实现在 foreach 循环中,在其他方法边遍历边输出.如下: class Program { private List<int> list = n ...

  4. Day 23 23.1：js加密算法

    js加密算法 逆向重点掌握的内容: 1.逆向的思维 2.网站逆向的分析思路和步骤 注意:重点不是放在代码中,而是分析的思路和套路(技巧) 逆向到底是什么? 通俗来讲,逆向就是处理爬虫过程中对于加密数据 ...

  5. Docker中使用Jenkins（3）

    一.前言 上一文章介绍了docker-compose,本文介绍Jenkins自动化部署. 二.Jenkins dockerfile文件切记右键属性复制到输出目录调整为:如果较新则复制,否则在publi ...

  6. Matplotlib 网格线

    我们可以使用 pyplot 中的 grid() 方法来设置图表中的网格线. grid() 方法语法格式如下: matplotlib.pyplot.grid(b=None, which='major', ...

  7. ionic混合开发总结之调用手机相机

    整理一下,给接触ionic的伙伴们一些参考,少走弯路. 调用手机的前提是已经成功创建了项目. 首先,要下载两个插件,一个是 cordova-plugin-camera,是调用相机的插件,还有一个是Ng ...

  8. 【Direct3D 12】学习准备

    学习资料 微软官方文档地址: https://docs.microsoft.com/en-us/windows/win32/direct3d12/direct3d-12-graphics 左下角可以根 ...

  9. S-HR常用源码

    1.public static String getUserId(Context ctx) {        UserInfo userInfo = ContextUtil.getCurrentUse ...

  10. macOS 系统安装提示应用程序副本已损坏的解决方法

    错误预览: 操作方法,关闭Wi-Fi,网线(以修改时间为 2020 为例): 再次尝试安装吧...