zoukankan      html  css  js  c++  java
  • css中heigh、min-height和max-height的使用

    1、min-height和height同时使用,谁大听谁的

    2、max-height和height同时使用,虽小听谁的

    3、height、min-heigth和max-height同时使用,分为以下情况

    • height > max-height > min-height   元素高度:max-height
    • height > min-height > max-height   元素高度:min-height
    • min-height > height > max-height   元素高度:min-height   
    • min-height > max-height > height   元素高度:min-height 
    • max-height > height > min-height   元素高度:height
    • max-height > min-height > height   元素高度:min-height

    之前遇到一个使用场景:页面整体绝对定位且有背景颜色时,由于脱离文档流,使得父盒子高度为0,如果设置具体固定高度,在移动端上会出现适配问题,即不同尺寸手机高度不同,背景颜色出现断层,如果同时使用min-height和height,谁大听谁的,min-height:100%,height:固定高度(可以设置为刚好将定位元素包裹住的高度),当手机高度较大时,min-height > height,页面完整一屏,在小屏手机上,height > min-height,一屏放不下,页面滚动,出现滚动条,高度为height

  • 相关阅读:
    C++(四)--线程与进程
    http1.0升级到http1.1
    odoo 基础
    Ubuntu 上安装配置 Ldap
    odoo 怎样使代码生效
    Odoo 创建自定义模块
    开源的软件应用
    域控
    Flask 数据库 SQLAlchemy
    CentOS 8 防火墙 firewall 相关命令
  • 原文地址:https://www.cnblogs.com/xldbk/p/12114686.html
Copyright © 2011-2022 走看看