要求。上部固定高度50px,下部分自适应剩下整个屏幕

html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#main {
background-color: #999;
height: 100%;
} #nav {
background-color: #85d989;
width: 100%;
height: 50px;
}
#content {
background-color: #cc85d9;
width: 100%;
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
}

高度自适应百分比

.main {
overflow: hidden;
height: 0;
padding-bottom: 50%; 这个是相对于宽度
}

1高度自适应遇到问题

//当父元素设置宽高自适应后。子元素设置width100%后
//子元素的子元素布局要注意
//因为默认是标准模型 内容宽度为实际宽度 pading和margin会超出

css实现高度自适应的更多相关文章

  1. css 图片高度自适应

    开始采用js,获取屏幕宽度,按宽高比来设置图片大小. var wid = window.screen.width; wid = wid * 0.85; $('.Img').css('width',wi ...

  2. CSS解决高度自适应问题

    HTML结构如下: <div id="main">     <div id="top">top</div>     < ...

  3. 实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应

    html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  4. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  5. CSS两列高度自适应,右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  7. CSS: 解决Div float后,父Div无法高度自适应的问题

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  8. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  9. css 实现文字自动换行切同行元素高度自适应

    1.实现div行内布局所有行跟随最大高度自适应 html代码样例: <div class="row-single"> <div class="colsp ...

随机推荐

  1. NO10 查看Linux操作系统-版本-内核-Linux分区

    ·看Linux系统: [root@localhost ~]# uname -m  (看操作系统)x86_64[root@localhost ~]# uname -a   (看操作系统)Linux lo ...

  2. 基于 Annotation 的装配(注解)

    注解:就是一个类,使用@注解名称 开发中:使用注解 取代 xml配置文件. 1. @Component取代<bean class=""> @Component(&quo ...

  3. 英语 - take的短语

    take care of  照顾 take place  发生 take action  行动 take over  接管 take in   欺骗(某人) take up   拿起 take awa ...

  4. python 输出六行星号✳

    for i in range(1,6): for j in range(5-i): print(" ",end=" ") for j in range(1,2* ...

  5. 3种python调用其他脚本的方法,你还知道其他的方法吗?

    1.用python调用python脚本 #!/usr/local/bin/python3.7 import time import os count = 0 str = ('python b.py') ...

  6. 八十三、SAP中的ALV创建之二,ALV相关的类型池定义

    一.与ALV相关的类型都是在TYPE-POOLS:SLIS中.我们来到SE11 二.常用的定义有fieldca和layout等,用于显示字段,和控制信息数据等. 三.我们以VBAK表为例,用ALV输出 ...

  7. React 学习笔记(2) 路由和UI组件使用

    安装依赖 cnpm install react-router-dom -S // 或 yarn add react-router-dom 导入 // index.js import React fro ...

  8. VUE3.x 前瞻

    文档: API Reference 教程 课件 1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install ...

  9. Flutter如何引用第三方库并使用

    Flutter如何引用第三方库并使用 https://www.jianshu.com/p/bbda7794345e Flutter官网点击访问Flutter教程(一)Flutter概览Flutter教 ...

  10. Android Studio模拟器无法访问网络

    Android Studio3.5 模拟器无法访问网络的原因?