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爬取北京政府信件信息02

    在爬取详细信息页面中,又遇到了问题,就是标签内的信息爬取,用re的正则表达式没有找到解决办法,只能又去网上搜索解决办法 用bs4来解决,用 soup = BeautifulSoup(text,&quo ...

  2. Java基础00-内部类23

    1. 内部类 内部类 1.1 内部类概述 代码示例: 1.2 成员内部类 代码示例: 创建一个成员内部类:定义时没有小括号是因为类是没有形参的.在类的成员位置,就是成员内部类了 创建测试类:这里发现不 ...

  3. Java基础00-学生管理系统16

    1. 学生管理系统 1.1 项目演示 1.2 实现思路 1.3 定义学生类 public class Student { private String sid; private String name ...

  4. Docker搭建Redis5.0并挂载数据

    记录 Docker 搭建 Redis5.0 并挂载数据过程,搭建参考自 Docker Hub 系列文章欢迎访问:https://www.itwxe.com/posts/9e76db89/ 一.简单挂载 ...

  5. ESCMScript6（3）Promise对象

    1. Promise的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了P ...

  6. Requests方法 -- Blog流程类进行关联

    1.接口封装关联 1.有些接口经常会用到比如登录的接口,这时候我们可以每个接口都封装成一个方法,如:登录.保存草稿.发帖.删帖,这四个接口就可以写成四个方法2.接口封装好了后,后面我们写用例那就直接调 ...

  7. JDK的环境变量配置（详细步骤）

    JDK环境变量配置的步骤(Windows10) 一.下载并安装JDK 选择一个JDK版本下载并安装到电脑上. 二.环境变量的配置 1.安装完成JDK后的配置环境变量: 首先鼠标右击"计算机& ...

  8. 分别在Update和FixedUpdate使用GetKeyDown

    测试目的 探究分别在Update和FixedUpdate使用GetKeyDown执行次数,会不同的 测试开始 在Update测试 我们先在Update测试,很正常是一帧重置一下状态,以防止点击一下执行 ...

  9. 让Angular自定义组件支持form表单验证

    Angular提供了一套非常强大的表单验证库(vue和react都需要第三方库的支持),可以非常方便简单实现web应用程序中的表单验证功能.但是如何让我们自定义的组件也支持验证呢? 我遇到一个需求是封 ...

  10. 模版引擎RazorEngine简介

    ASP.NET MVC的Razor想必大家都比较熟悉,这里介绍一个独立于ASP.NET的RazorEngine. RazorEngine是一个开源的项目,它的基础就是ASP.NET MVC的Razor ...