问题描述
拿这个: .edit-me {
height:100%; / *的行为与Chrome *不同* /
width:10px;
border:1px纯蓝色;
背景:红色;
float:left;
溢出:auto;
}
在Chrome和Firefox上打开页面。蓝色的div不会继承
有没有解释为什么会发生这种情况?任何修复?纯粹的HTML / CSS解决方案是可取的。
尝试设置 tr
和
td
到100%:
tr, td {height:100%; }
一般来说,要得到
height:100%
要正常工作,元素父母的所有高度也必须设置。
编辑:
另一种解决方案是用容器 div
包装 td
的内容并使用绝对定位以确保 .edit-me
div有效地具有100%的高度。
以下是HTML的外观例如:
< table border =1>
< tr>
< td>
< div class =container>
< div class =edit-me>< / div>
Foo
< br />
Bar
< / div>
< / td>
< td> hello< / td>
< / tr>
< / table>
和CSS:
.container {
position:relative;
padding-left:10px;
}
.edit-me {
position:absolute;
top:0;
bottom:0;
剩下:0;
width:10px;
border:1px纯蓝色;
背景:红色;
溢出:auto;
}
希望这有助于您!
Take this: http://jsfiddle.net/zVscL/4/
.edit-me {
height:100%; /*does not behave the same as Chrome*/
width:10px;
border:1px solid blue;
background:red;
float:left;
overflow: auto;
}
Open the page on Chrome, then Firefox. The blue div does not inherit
Is there an explanation why this happens? Any fixes? Pure HTML/CSS solutions are preferable.
解决方案 Try setting the height of the tr
and td
to 100%:
tr, td { height: 100%; }
Generally speaking to get height: 100%
to work correctly, all the heights of the element's parents must be set as well.
EDIT:
An alternative solution is to wrap the contents of the td
with a container div
and use absolute positioning to ensure the .edit-me
div effectively has 100% height.
Here's what the HTML would look like:
<table border="1">
<tr>
<td>
<div class="container">
<div class="edit-me"></div>
Foo
<br/>
Bar
</div>
</td>
<td>hello</td>
</tr>
</table>
and the CSS:
.container {
position: relative;
padding-left: 10px;
}
.edit-me {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width:10px;
border:1px solid blue;
background:red;
overflow: auto;
}
Hope this helps!
这篇关于火狐浏览器,IE9 +问题内部的高度100%(在Chrome上的工作示例)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!