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

第一感觉是准备用 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. Jmeter 快速生成测试报告

    我们使用Jmeter工具进行接口测试或性能测试后一般是通过察看结果数.聚合报告等监听器来查看响应结果.一.Jmeter配置 首先要保证jmeter命令是ok的,如果你在cmd中输入jmeter -v, ...

  2. Word13 《经费联审结算单》模板office真题

    1.根据题目一的要求,打开素材文件,点击[文件]-[另存为],选择[当前文件夹],命名为Word. 2.根据题目二的要求,在[布局]里点击[页面设置]的右下角,打开页面设置窗口,选择[纸张],根据题目 ...

  3. react 01基础 样式

    一,react 特点 1. 声明式设计 2.虚拟dom 3.jsx 4.组件化,模块化 5.单向数据流 二,脚手架 Create React App npm i -g create-react-app ...

  4. Android MVP框架 详细代码

    android mvp的好处,网上一搜一大堆,相对于一开始普通的在activity中处理所有的不管是网络请求还是页面渲染,最大的好处是简洁了,废话不多说,看代码 这里网络请求使用了两种,一种是自己封装 ...

  5. Git安装，配置、基本使用

    p.p1 { margin: 0; font: 12px ".PingFang SC" } p.p2 { margin: 0; text-align: justify; font: ...

  6. 有监督的图像翻译——Pix2Pix

    应用:图像到图像的翻译是GAN的一个重要方向,基于一个输入图像得到输出图像的过程,图像和图像的映射,如标签到图像的生成,图像边缘到图像的生成过程. 图像处理.图形和视觉中的许多问题涉及到将输入图像转换 ...

  7. mysql数据库新建用户，并赋予权限

    新建用户: CREATE USER 'testuser'@'LOCALHOST' IDENTIFIED BY '123456'; 赋予权限: grant select on *.* to 'testu ...

  8. Kubernetes部署的10个注意事项

    摘要 容器开发有望在云中实现前所未有的可移植性和可扩展 性.此外,DevOps 开发和文化实践也有助于提升业务价 值和响应能力.但是,在开始第一个容器开发项目之前, 有一些问题需要考虑清楚:我们应该使 ...

  9. [iOS]遇到了一个问题：“XXXX”中无法使用Apple Pay ，检查此应用的设置并确定其设计可使用Apple Pay”

    在钥匙串里查看,发现当时申请的Merchant ID XXXX 证书过期 1. 到 apple开发者: https://developer.apple.com/account/#/overview/ ...

  10. git远程分支回退到某个版本

    1.找到要回退的版本号(右击项目--> Git --> Show History -->选中要回退的版本-->Copy Revision Number): 2.打开idea的T ...