为什么css高度100%不适用于普通div?

2023-12-15

这是我的简单代码

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{height:100%;width:100%;background:red;position:relative;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

CSS高度100%不适用于DIV。

我知道一些其他的 css 代码来获取这个。但为什么这段代码不起作用。如何在没有任何脚本的情况下处理高度 100% 和宽度 100%。


For %要工作,您需要设置高度parent element以及。

Set html, body {height: 100%}

从文档 -

是根据高度计算的 包含块。如果包含块的高度不是 明确指定,该值计算为 auto。百分比高度 根元素上的(例如 )是相对于初始元素的 包含块(其尺寸等于 视口)。

欲了解更多信息,请访问 -MDN 百分比文档

所以对于你的情况,你可以这样做 -

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,body{height:100%;}
        div{height:100%;width:100%;background:red;position:relative;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么css高度100%不适用于普通div? 的相关文章

  • 使用百分比 (%) 时如何计算填充?

    为什么本例中的内边距不等于 300 像素 Test width 600px padding right 50 box sizing border box background ddd div TEXT ETISI DHOASIHD I SA
  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • CSS 计数器输出不匹配

    有人可以解释一下为什么吗section计数器值总共打印 0h2 tags 这是源代码
  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系?

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢
  • 确定使用 -webkit-line-clamp 表示多行省略号时是否显示省略号

    我们使用多行 CSS 省略号https css tricks com line clampin https css tricks com line clampin 我们想要检测省略号是否正在显示 并根据省略号是否正在显示来决定显示工具提示
  • 我无法注入带有“!important”规则的样式[重复]

    这个问题在这里已经有答案了 我尝试使用以下代码注入样式 document body style color green important Per CSS 级联引用 http www w3 org TR CSS2 cascade html
  • 带滚动条的 HTML 画布

    我正在宽度不等的画布上绘制图表 每个画布可以有自己的滚动条吗 我尝试将所有画布放在一个 div 中并指定最大宽度 但它不起作用 是否有可能所有画布在页面上的可见宽度均为 500 像素 并且每个画布都有其滚动条来查看画布的整个宽度 谢谢 指定
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571
  • .net dropdownlist对齐文本

    我正在尝试将 net 下拉列表中的文本向右对齐 使用 CssClass 我可以在 Firefox 中将文本向右对齐 IE 不会将文本右对齐 而是左对齐 我读到 IE 6 不支持这个 这是真的 我使用的是 IE7 但我的大多数用户将使用 IE
  • 如何反转媒体查询中元素的顺序?

    我有两个 div 左和右 但是当屏幕小于 500px 时 左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个 第二个 div 为第一个 I use display flex 然后 div
  • iframe 位置居中

    所以我找到了这段用于将内容放在中心的代码 但我的问题是它是为容器制作的 你知道如何为 iframe 制作它吗 或者你知道另一个代码吗 代码 center margin auto width 60 border 3px solid 73AD2
  • 如何更改 div 悬停时的跨度颜色

    我正在尝试更改 div 悬停时跨度的颜色 如何使红色汉堡按钮 即跨度 在 div 悬停时将颜色更改为黑色 PS 现在它在跨度的悬停上执行此操作 JSFiddle https jsfiddle net bjjbqct8 https jsfid
  • 使用 Javascript 动态添加时,SVG 元素无法正确缩放

    我正在尝试使用 Javascript 在 Bootstrap Grid 中添加 SVG 控件 我可以使用 Javascript 添加 SVG 但页面的缩放 调整大小的行为并不像使用静态 HTML 构建的那样 单击 添加页面 按钮时 一组新的
  • 如何将 em 标签重新设置为粗体而不是斜体

    我想让文本在 em 标记粗体而不是斜体 有没有办法用 CSS 来实现这一点 当然 使用以下 CSS 代码 em font weight bold font style normal em
  • 如何使用 :nth-child() 选择所有子项中的所有其他

    我正在开发一个评论系统 我需要拥有其他所有孩子 div 甚至是第一个孩子的孩子 用 CSS 选择 例如 假设我有这个标记 为了简单起见 省略了不需要的结束标签 div class comment div class comment div
  • 设置列表中前 10 项的样式

    可以使用像 li nth child 这样的东西来设置列表中前十项的样式吗 ol li item 1 li li item 2 li li item 3 li li item 4 li li item 5 li li item 6 li l
  • Bootstrap 的网格每行列数

    Bootstrap 附带一个 12 列网格系统 必须放置在行内 我的问题是 列数 行数是否必须为 12 或更少 或者我可以有如下所示的布局吗 div class row div class col md 4 div div class co
  • CSS 聚焦于出现的输入 div [重复]

    这个问题在这里已经有答案了 我有这样的代码 div class lighter div
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github

随机推荐