HTML 高度

下面示例 设置为 Auto 和 100%

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    #app {

      height: 100px;

      width: 200px;

    }

    .auto-h {

      height: auto;

      width: 100px;

      float: left;

    }

    .parent-h {

      height: 100%;

      width: 100px;

      float: right;

    }

  </style>

</head>

<body>

  <div id="app">

    <div class="auto-h">这个容器的高度是随里面的内容的高度而定，可以通过开发者工具看到高度是否超出父级高度</div>

    <div class="parent-h">这个容器的高度为父级的高度(100px)，可以通过开发者工具看到高度是否超出父级高度</div>

  </div>

</body>

</html>

设置父类高度为100px

设置子类自动高度 auto

设置子类 100% 高度

Html 之自动高度 auto 和 100%高度的更多相关文章

  1. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  2. 两个div，高度都是100% 用 display:flex; 和 min-height 一边撑高了，另一边自动走 （不加flex不自动撑开）

    两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走

  3. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  4. CSS高度自适应 height:100%;

    在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE htm ...

  5. html的height:100%;高度是多少

    html的height:100%;高度是多少 html设置height:100%;表示一屏高度,类似于100vh.未设置则根据子元素的高度来自适应高.在实际应用中,设置页面高度为1屏幕高度通常设置: ...

  6. 使用padding代替高度实现背景图片高度按比例自适应

    本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...

  7. ugui 获取Text的高度，动态改变高度

    项目中需要根据聊天内容的多少.显示外边框的高度.因为Text的内容是不固定的.但宽度是固定的.高度根据文字多少自增 可以通过Text的属性preferredHeight 获取文本框的高度

  8. CSS布局-body高度不等于页面高度

    记录采坑: 博客记录问题,用作回忆用,不喜勿喷! html,body{width: 100%; height: 100%}这是初始定义的宽高.在布局越写越复杂的时候,布局很容易出现问题,例如一个页面中 ...

  9. C++11 自动推导auto

    C++11 自动推导auto C++11中引入的auto主要有两种用途:自动类型推导和返回值占位. auto在C++98中的标识临时变量的语义,由于使用极少且多余,在C++11中已被删除.前后两个标准 ...

随机推荐

  1. python + mysql 实现查询表数据

    实例如下: import pymysqldef select_form(): # 打开数据库连接 db = pymysql.connect("localhost", "r ...

  2. 莫比乌斯反演&整除分块学习笔记

    整除分块 用于计算$\sum_{i=1}^n f(\lfloor{n/i} \rfloor)*i$之类的函数 整除的话其实很多函数值是一样的,对于每一块一样的商集中处理即可 若一个商的左边界为l,则右 ...

  3. Halcon——图像增强算子以及分类

    摘要 图像增强就是指通过某种图像处理方法对退化的某些图像特征,如边缘.轮廓.对比度等进行处理,以改善图像的视觉效果,提高图像的清晰度,或是突出图像中的某些"有用",压缩其他&quo ...

  4. 队列Queue：任务间的消息读写，安排起来~

    摘要:本文通过分析鸿蒙轻内核队列模块的源码,掌握队列使用上的差异. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列十三 消息队列Queue>,作者:zhushy . 队列(Queue)是 ...

  5. 【转载】PHP 程序员进阶之路

    原文:没有Nginx,你还能做什么? PHP程序员的未来不是Java,Java拯救不了你. 已经1368年了,你扪胸自问,没有了Nginx的你,还能用PHP做什么.有一些高端的刁民会愤怒地说:&quo ...

  6. [考试总结]noip模拟26

    首先看到这样中二的题目心头一震.... 然而发现又是没有部分分数的一天. 然而正解不会打.... 那还是得要打暴力. 但是这套题目有两个题目只有一个参数. 所以... (滑稽).jpg 然后我就成功用 ...

  7. 第二篇 -- Django写一个接口并用Jmeter进行测试

    第一节学习了Jmeter的下载和安装,那么第二节就来看看具体怎么使用. 本篇介绍的是使用Jmeter进行http接口测试,那么接口程序使用Django开发的一个小接口. 一.Django编写接口 这一 ...

  8. HashMap的转化时机

    HashMap的转化时机 /** * 使用红黑树(而不是链表)来存放元素.当向至少具有这么多节点的链表再添加元素时,链表就将转换为红黑树. * 该值必须大于2,并且应该至少为8,以便于删除红黑树时转回 ...

  9. 几篇关于RGBD语义分割文章的总结

      最近在调研3D算法方面的工作,整理了几篇多视角学习的文章.还没调研完,先写个大概.   基于RGBD的语义分割的工作重点主要集中在如何将RGB信息和Depth信息融合,主要分为三类:省略. 目录 ...

  10. 什么是CIDR？

    英文缩写: CIDR (Classless InterDomain Routing) 中文译名: 无类别域间路由选择 IP地址有"类"的概念,/8掩码是A类,/16掩码是B类,/2 ...