当前位置: 首页 > 面试题库 >

为什么100%不是100%的身高?

严修诚
2023-03-14
问题内容

我正在尝试divs扩展一些以填充屏幕,但是我很挣扎。我已经解决了这个jsfiddle的问题。

我真正想知道的是divmin-height当其父项具有相同的属性并且会扩展时,为什么100%的不会扩展到那个高度(或根本不扩展)?

<body>
    <div>
        stuff
    </div>
</body>

body {
    min-height: 100%;
    background: red;
}
div {
    min-height: 100%;
    background: grey;
}

问题答案:

CSS 2.1规范涵盖了该问题:

< 百分比>

指定百分比高度。相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度(即,它取决于内容的高度),并且该元素的位置不是绝对的,则该值将计算为“自动”。根元素上的百分比高度是相对于初始包含块的高度。注意:对于绝对定位的元素(其包含的块基于块级元素),百分比是相对于该元素的填充框的高度计算的。这是CSS1的更改,在CSS1中,始终相对于父元素的内容框计算百分比。

因此,为了澄清起见,百分比高度将引用其包含块的高度(除非它是position: absoluteposition: fixed)。如果该包含块的高度没有指定,则百分比将指auto,实际上不会做太多。

position: absolute引用包含块改变到位于最近的(absoluterelative,或fixed)元素。

position: fixed 将引用的包含块更改为视口。

因此,如果在包含块上指定高度,在包含块上指定静态以外的位置,或者不介意将视口用作包含块,则可以有效地使用百分比高度。



 类似资料:
  • 这个背景图应该顶到最左边去才对,为什么没有过去?图片格式是svg,我在想是不是svg的原因?有无大佬讲解一下原理。 图片本身左边没有空隙,所以不是图片内容的问题。

  • 问题内容: 当我有一个with时,它并不是100%: 现在,当您调整窗口大小时,会有一个水平滚动条,然后向右滚动,则背景消失了。在这种情况下如何保持背景? 现在,当您调整窗口大小并向右滚动时,您将不再看到背景。如何解决这个问题? 问题答案: 100%值是父级宽度或视口的100%。请参阅文档。

  • 问题内容: 我使用占用所有可用空间的第三方组件,即width=100%和height=100%。我没有控制权。 我正在尝试使其适合以下布局,但是它height=100%不起作用(我希望第三方组件占据所有绿色空间)。 为什么?您将如何解决? 问题答案: 通常,对于使用percent on height来获取其父代的高度的元素,父代需要的高度不是auto或定位为绝对高度,否则height将计算为aut

  • 当我在javascript中使用运算符时,为什么最后得到的值是100而不是101?我想知道javascript中运算符的详细信息?

  • 本文向大家介绍setTimeout(fn,100);100毫秒是如何权衡的?相关面试题,主要包含被问及setTimeout(fn,100);100毫秒是如何权衡的?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: setTimeout()函数只是将事件插入了任务列表,必须等到当前代码执行完,主线程才会去执行它指定的回调函数,有可能要等很久,所以没有办法保证回调函数一定会在setTimeout

  • 问题内容: 为什么我的查询不能处理集合中超过100个文档? 错误说: 如果文档<100,则一切正常。 问题答案: 您可能正在执行以下操作: 因此,您要在调用回调之前关闭数据库(尽管在某些情况下它 可以 工作)。 相反,请尝试以下操作: