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

第一感觉是准备用 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. redis RDB和AOF

    1.RDB 在指定的时间间隔内讲数据快照写入硬盘当中 2.AOF 2.1 以日志的形式来记录每个写操作,redis启动之初会读取该文件重新构建数据 2.2 修改配置文件 appendonly no 为 ...

  2. redis运维与管理

    redis内存存储,速度极快 丰富的附件功能 1.持久化功能:降存储在内存的数据保存到硬盘 2.发布与订阅:将消息同时分发给多个客户端 3.过期键功能:为键设置一个过期时间,让它在指定的时间之后自动被 ...

  3. react 03 组件传值

    一 基础 props: 父传子  单向 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css ...

  4. 学习笔记3：Android Studio 配置NDK编译c++代码

    NDK编译c++代码有两个方式: 1  ndk-build.cmd + Android.mk + Application.mk 编译, 可单独用ndk编译, 不使用IDE,使用Android需要配置b ...

  5. Python安装第三库超时的解决方法

    Python安装第三库超时的解决方法 1. 在很多时候使用python的时候需要使用到某些第三方库,比较常规的方法是使用cmd命令使用在线安装的方法(前提是在安装好了python相应版本时候配置好了相 ...

  6. C++基础复习题（笔试题）

    C++基础~for循环:选择,判断 HELLO,亲爱的小朋友! 我们准备 35个选择题,对for循环及之前的内容进行一个简单的复习,快来看一下吧! 顺序&选择结构 1.对于C++中变量的命名规 ...

  7. 关于pytest生成测试报告

    之前用pytest集成allure,记录的很清楚确实很好,但是我不知道怎么把生成的所有结果通过邮箱发送 可以使用pytest-html生成的html是这样的 也很清楚 但是!!!!!!!!!!!!!! ...

  8. MariaDB 搭建主备及主主

    一.主备 可参考:MariaDB之GTID主从复制 二.主主

  9. docker部署opengauss

    下载二进制包到/opt/software/ wget https://opengauss.obs.cn-south-1.myhuaweicloud.com/1.1.0/x86/openGauss-1. ...

  10. CH32F103C8T6调试口Disable后的修复办法

    1.问题描述 因为软件编程,将CH32F103的 debug disable了,无法通过仿真器下载程序. 2. 修复 2.1 解决思路 利用厂家给的串口ISP进行下载(HUSB或者COM) 2.2 硬 ...