个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
我有一个完全适用于 Firefox 和 IE 的以下布局: 
不幸的是，它在 Chrome 中很糟糕，即深蓝色容器折叠起来，即使它的高度是其父容器的 100%: 
我试过了 this approach ，但没有任何运气。有什么想法可以在 Chrome 上解决这个问题而不破坏其他浏览器吗？
html,
body {
height: 97%;
margin: 0;
padding: 0;
}
div {
border: 10px dotted teal;
}
.container {
display: flex;
border-color: tomato;
height: 100%;
}
.row {
flex-flow: row;
}
.column {
flex-flow: column;
}
.item1 {
flex: 1;
}
.item2 {
flex: 2;
}
.item3 {
flex: 3;
}
.c1 {
border-color: gold;
}
.c2 {
border-color: darkblue;
}<div class="container">
<div class="item3">
<div class="container column c2">
<div class="item1 c1"></div>
<div class="item3"></div>
</div>
</div>
<div class="item1 c1"></div>
<div class="item2"></div>
</div>最佳答案
问题是:
I have a following layout fully working in Firefox and IE. Unfortunately it is broken in Chrome, namely the dark blue container is collapsed even though it has height 100% of its parent.
实际上，可以提出相反的论点:Chrome 是正确的，而 Firefox 和 IE 是“坏的”。
首先，这是解决方案:
.item3 { height: 100%; }
现在让我们看看您的文档结构和应用的高度:
<html> <!-- height: 97% -->
<body> <!-- height: 97% -->
<div class="container"> <!-- height: 100%; -->
<div class="item3"> <!-- height: ?? -->
<div class="container column c2"> <!-- height: 100% ; this is the collapsed box -->
...
...
...
根据 CSS specification ，当使用百分比设置元素的 height 时(就像您使用 .container 所做的那样)，父元素必须也有一个明确的高度。关于折叠的 div，其父级 (.item3) 没有定义的高度。
来自spec :
<percentage>
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.auto
The height depends on the values of other properties.
在 height 属性方面，从这个例子可以看出，Chrome 将“包含 block ”定义为“父级”，而 Firefox 和 IE 将“包含 block ”定义为“祖先”，或者他们将 flex 高度作为百分比高度的引用。
因此，由于深蓝色边框的div(.container column c2)没有内容，而且它的parent没有指定高度，所以没有高度并且该框在 Chrome 中折叠。
但是，通过为折叠框的父级 .item3 指定高度，该高度适用于所有浏览器。
更新
更多详情:
关于html - 百分比高度在 Chrome 中的嵌套 flexbox 布局中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31046621/
26
4
0
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？ 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀！