基本身高百分比

2023-12-13

我不明白身高百分比是如何运作的。

为什么下面的片段没有填充颜色?

body {
  height: 100%;
}
#div1 {
  height: 20%;
  background-color: red;
}
#div2 {
  height: 80%;
  background-color: blue;
}
<div id="div1"></div>
<div id="div2"></div>

你必须设置html's height以及。

html,
body {
  height: 100%;
  margin: 0;
}
#div1 {
  height: 20%;
  background-color: red;
}
#div2 {
  height: 80%;
  background-color: blue;
}
<div id="div1"></div>
<div id="div2"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基本身高百分比 的相关文章

  • Chrome DevTools:计算样式与 css 规则不同?

    当我在 CSS 文件中定义 4px 时 我的 DOM 元素的 border top width 怎么可能是 0px 当我使用 Chrome DevTools 检查元素时 我发现计算的样式告诉 0px 而最上面的 css 规则是 4px 而且
  • 是否可以将CSS应用于半个字符?

    我在寻找什么 一种打造风格的方法HALF一个角色的 在这种情况下 一半的字母是透明的 我目前搜索和尝试过的内容 没有运气 设置半个字符 字母样式的方法 使用 CSS 或 JavaScript 设置字符的一部分样式 将 CSS 应用于字符的
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • 单击按钮重复动画

    我想每次单击按钮时都重复动画 我尝试做某事像这样 https jsfiddle net 91raod7e const dist document querySelector dist document querySelector butto
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • 您能否确定 CSS 文件的范围,使其仅适用于给定元素的后代?

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小

随机推荐

  • 如何使用socket.io从节点连接到telnet服务器

    我可能没有输入正确的搜索词 但我似乎找不到允许我的节点应用程序启动与另一个 telnet 服务器 非节点 的 socket io 客户端连接的好例子 下面是我的节点应用程序尝试连接到 telnet 服务器 var ioc require s
  • 除了 COM 之外,还有更好的方法来远程控制 Excel 吗?

    我正在开发一个回归测试工具 该工具将验证大量的 Excel 电子表格 目前 我使用最新版本的 pywin32 产品通过 Python 脚本通过 COM 控制它们 不幸的是 COM 似乎有许多恼人的缺点 例如 最轻微的干扰似乎就能中断与 CO
  • 创建用于导航的 ViewModel

    我有一个带有多个视图的 MVC 4 应用程序 IE 产品 食谱 分销商和商店 每个视图都基于一个模型 让我们保持简单 假设我的所有控制器都传递一个类似的视图模型 看起来像我的 Product 操作 public ActionResult I
  • 从代码隐藏中将页面异步模式设置为 true

    是否可以在我的代码隐藏文件中设置页面指令的异步模式 我没有办法直接修改属性 并努力寻找一种在我的代码隐藏中实现此功能的方法 我尝试在我的 Page Load 方法中添加Page AsyncMode true 但它返回以下错误 由于其保护级别
  • 如何使用 # 作为 CoffeeScript hereregex 的一部分?

    我正在尝试匹配 jQuery Mobile URL 的哈希片段 如下所示 matches window location hash match we re interested in the hash fragment the path t
  • Python:Flask 的模拟补丁错误

    在编写 Python 方面 我完全是个新手 更不用说测试它了 这是我的 Flask 端点 blueprint route mailing finish
  • 如何更换|| (两个管道)来自带有 | 的字符串(一)管道

    我收到此标签内一些 json 格式图像的响应 xmlImageIds 57948916 57948917 57948918 57948919 57948920 57948921 57948 922 57948923 57948924 579
  • 复制构造函数需要调用依赖于对象的方法,但构造函数不能是虚拟的

    我有一个带有两个继承类的抽象基类 在这两个类中 我定义了一个由构造函数使用的虚拟方法 现在我需要创建一个复制构造函数 但我不能将复制构造函数声明为虚拟 但我希望其中的方法调用依赖于作为参数提供的对象的类型 我该如何解决这个问题 现在我使用基
  • 当有受保护的工作表时如何保持宏运行?

    我用密码保护了工作表 4 因为工作表 4 中的某些单元格不允许用户输入 密码是 1234 但是 我想运行我的宏 如果出现错误 单元格将自动突出显示 我的宏未运行并出错 因为我要突出显示的单元格位于受保护的工作表中 当我单击验证按钮时 如何使
  • 你能指定 std::getline 中什么不是分隔符吗?

    我希望它将任何非字母字符视为分隔符 我怎样才能做到这一点 你不能 默认分隔符是 n while std getline std cin str n is implicit 对于其他分隔符 请传递它们 while std getline st
  • mongoDB 聚合:根据数组名称求和

    我有一场比赛的以下数据 date 20140101 duration 23232 win player Player1 score 2344324 player Player4 score 23132 loss player Player2
  • 如何处理大多数十进制小数无法准确表示为二进制的事实?

    所以 我们知道像 0 1 这样的分数无法用二进制精确表示 这会导致精确问题 例如这里提到的 在 C 中格式化双精度数以进行输出 我们知道我们有十进制类型来表示数字 但问题是 很多数学方法不支持十进制类型 所以我们将它们转换为双精度 这再次破
  • 为什么 R 中的 apply() 方法比 for 循环慢?

    作为最佳实践 我试图确定创建一个函数是否更好apply 它穿过一个矩阵 或者是否最好简单地通过该函数循环一个矩阵 我尝试了两种方法并惊讶地发现apply 速度较慢 任务是获取一个向量并将其评估为正或负 然后返回一个向量 如果为正则返回 1
  • 使用 React 将提交的表单值保存在 JSON 文件中

    我正在尝试创建一个 React 表单 它将在提交时使用表单中的值更新 JSON 文件 最终结果是 每次提交表单时 这都会在 JSON 文件中创建一个数据数组 然后可以使用该数组填充应用程序中其他地方提交的结果的 列表 表单本身工作正常 但每
  • 如何在android中安排一些代码执行或者:android中的守护线程到底是什么?

    我目前正在开发一个适用于 Android 操作系统的应用程序 它需要不时从远程服务器获取数据 由于即使实际的前端应用程序未运行 也应该执行此 更新 因此我实现了一个在系统启动时启动的远程服务 现在我需要安排一个计时器来开始更新 Timer
  • django 在 modelform 中使用模型选择

    我想知道应该如何在模型表单中使用模型选择选项 示例 型号 class NPCGuild models Model CATEGORIES COM Combat CRA Crafting WAR Warfare faction models F
  • ZLib解压

    我正在尝试使用 zlib net 库压缩数据 无论未压缩字符串的内容如何 我似乎只在 raw 中获得两个字节的数据 string uncompressed 1234567890 byte data UTF8Encoding Default
  • 如何将android芯片对齐到芯片组的末尾?

    您好 我有一个芯片组 我动态创建芯片并添加到芯片组 However 我希望芯片位于芯片组的右端 但它始终位于左侧 如此处所示 我希望芯片 Text 0 和 Text 1 位于最右端 这是我的代码
  • 端口号未隐藏在 nginx 反向代理(下一个 js 服务器)中

    我正在尝试通过 create next app 部署 next js 应用程序 我有一个像这样的自定义 Express 服务器 const express require express const next require next co
  • 基本身高百分比

    我不明白身高百分比是如何运作的 为什么下面的片段没有填充颜色 body height 100 div1 height 20 background color red div2 height 80 background color blue