草庐IT

关于css:静态定位正常布局中body元素的高度是否默认不是其容器的100%?

codeneng 2023-03-28 原文

Is the body element's height not 100% of its container by default in the static positioning normal layout?

到目前为止,我一直假设默认情况下,根据正常的布局行为,即使设置了 position: static<body> 元素也会填充容器 <html> 元素高度的 100%。

然而,一个简单的实验证明我的假设是错误的,我很震惊。

我明白,在正常的布局行为中,块元素的高度是有弹性的并且可以拉伸以填充它们的全部内容。但是,出于某种原因,我认为这不适用于 <body> 元素。

所以,在我的简单实验中,我有以下 HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html {
background-color: white;
}

body {
width: 50%;
background-color: gray;
margin: 0 auto;

min-height: 100%;
height: 100%;

/* position: absolute;
left: 22%; */

}
1
2
3
4
5
6
7
8
9
Nice sounds

<p>Zoo zoo zoo</p>

<p>Koo koo koo</p>

<p>Boo boo boo</p>

<p>Poo poo poo</p>

如果我将 position: absolute; 保留为刚才的注释,那么默认情况下,在静态布局中,body 的行为与任何其他块元素一样,并且仅与填充其内容一样高,忽略规则 height: 100%;min-height: 100%。如下图所示。

但是,如果我将定位更改为 absolute,即如果我取消注释以下内容:

1
2
position: absolute;
left: 22%;

当然,它遵守 height: 100%; min-height: 100% 规则。然后它会填满浏览器的整个高度,如下所示:

这是正常行为吗? <body> 元素在布局规则方面的行为是否与任何其他块元素一样,尤其是。关于它的高度?

  • 这个问题可能会对您有所帮助:stackoverflow.com/questions/31893330/...
  • height 100% 继承自其父级,而 <html> 没有固有高度,只有其父级 viewport 有。 position: absolute 元素将视口作为其包含块,这就是 height: 100% 在那里工作的原因。
  • @TylerH:你说,"一个位置:绝对元素将视口作为它的包含块......"。但是,我读到 positionabsolute 的元素的默认定位上下文是 <html> 元素。 (developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/...)
  • @WaterCoolrv2 抱歉,我在考虑 position: fixed,它是将视口作为其包含块的那个,而不是 position: absolute;。可能很难记住,因为 position: fixed 和 position: absolute(以及当前 position: sticky,虽然可能不会持续很长时间)都被认为是"绝对定位"...... W3C 以其令人困惑和迟钝的措辞而闻名。


TL;DR:是的,这是正常行为。

但是。

曾几何时,有一个较旧的标准,默认情况下 body 确实具有视口的高度。很久以前。

另外,HTML 的一些晦涩的特性可能会造成混淆。如果不设置html元素的background-color属性,body的背景会被html"继承",让整个窗口都有这个背景,看起来就像body 占据了整个窗口,事实并非如此!

  • 关于 <html> 继承 <body> 元素的背景颜色的漂亮评论。那是我所做的另一个观察,它实际上让我开始研究这个特定的例子。所以我也特意为身体元素采用了不同的颜色来测试它。非常感谢。


当它是静态的时,它的父级是 html,当你在这种情况下使用静态定位时,它会在父级内思考。 html 默认情况下,因为任何其他块都有 height: auto 所以如果你将它更改为 100%,它就会变成你所期望的。

body 有一个父 html 并根据其父级构建其大小。

有关关于css:静态定位正常布局中body元素的高度是否默认不是其容器的100%?的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - 无法让 rspec、spork 和调试器正常运行 - 2

    GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么,我应该把“require'ruby-debug'”行放在哪里,以便在phone_spec.rb的特定点停止处理?(我所要求的只是一个大而粗的箭头,即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置,除非我没有正确测试它们,否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'

  4. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)?如何将新数组元素附加到第三个哈希元素? 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([]),完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的,那是你不想要的。您可以改用

  5. css - 用 watir 检查标签类? - 2

    我有一个div,它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素?开始元素看起来像这样。如果输入不正确,添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  6. 【Java 面试合集】HashMap中为什么引入红黑树,而不是AVL树呢 - 2

    HashMap中为什么引入红黑树,而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道,在JDK1.8以及之前,针对HashMap有什么不同。JDK1.7的时候,HashMap的底层实现是数组+链表JDK1.8的时候,HashMap的底层实现是数组+链表+红黑树我们要思考一个问题,为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好???2.链表上述的截图其实就是链表的结构,我们来看下链表的增删改查的时间复杂度增:因为链表不是线性结构,所以每次添加的时候,只需要移动一个节点,所以可以理解为复杂度是N(1)删:算法时间复杂度跟增保持一致查:既然是非线性结构,所以查询某一个节点的时候

  7. 「Python|Selenium|场景案例」如何定位iframe中的元素? - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时,对于使用了iframe的页面,如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候,可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签,如果直接查找是无法找到的,会抛出没有找到元素的异常。比如近在咫尺的例子就是,CSDN的登录窗体就是使用的iframe,大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素,会抛出NoSuchElementException异常。解决

  8. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  9. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中,是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字?这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]?(很明显,我编写了multiplied_by函数以区别于*,它似乎连接了数组的多个副本,不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  10. ruby-on-rails - 只有当不是 nil 时才执行映射? - 2

    如果names为nil,则以下中断。我怎样才能让这个map只有在它不是nil时才执行?self.topics=names.split(",").mapdo|n|Topic.where(name:n.strip).first_or_create!end 最佳答案 其他几个选项:选项1(在其上执行map时检查split的结果):names_list=names.try(:split,",")self.topics=names_list.mapdo|n|Topic.where(name:n.strip).first_or_create!e

随机推荐