相关疑难解决方法(0)
如何在100%的td内获得div高度100%
这个问题似乎在stackoverflow上至少有10次被问到,但其中没有一个实际上有答案.这个问题略有不同,因为问题出现在Firefox中.
我的table身高100%,tr身高100%.我将边界设置为td我能看到的东西.我看到它td是100%的预期.我把div在td并将其设置为高100%.它在Chrome中是100%.在Firefox中它不是100%.
我该如何解决？
例
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.full {
width: 100%;
height: 100%;
border: 10px solid red;
}
#content {
width: 100%;
height: 100%;
}
#content>table {
width: 100%;
height: 100%;
}
#content>table>tbody>tr>td {
border: 10px solid blue;
width: 50%;
}
#container {
width: 100%;
height: 100%;
border: 10px solid black;
}
</style>
</head> …推荐指数
解决办法
查看次数
td内的全高div
我想实现这个目标:
表行和灰线的高度应该是动态的,取决于右列中的内容.
我已经读过如何使<div>填充<td>高度,所以我尝试了这个http://jsfiddle.net/hyNWy/
但仍然没有运气.有什么建议？
推荐指数
解决办法
查看次数
使<div>的背景颜色填充封闭的<td>
我有一个HTML表格,其单元格包含divs display:inline-block,包含不同大小的文本.
我需要文本在基线上对齐,我需要divs 的背景颜色来填充单元格的高度.对于最大的字体,背景颜色确实填充单元格,但它不适用于较小的字体:
这可能吗？很明显的解决方案div { height:100% }似乎被不同的字体大小所打破.
这是迄今为止的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
table td {
vertical-align: baseline;
padding: 0;
}
td div {
display: inline-block;
}
</style>
</head>
<body>
<table>
<tr>
<td style="background-color:cyan">
<div style="background-color:pink;">Pink</div>
<div style="background-color:green;">Green</div>
</td>
<td style="background-color:cyan">
<div style='font-size: 40pt; background-color:yellow;'>
Big yellow text
</div>
</td>
</tr>
</table>
</body>
</html>
它也在这里的 jsfiddle .
推荐指数
解决办法
查看次数
如何在Firefox中使<div>填充<td>高度
在这里,IE和Chrome已经回答了这个问题,但是建议的解决方案似乎不适用于Firefox 16,45,也可能是介于两者之间的所有版本.
基本上,建议的解决方案如下:
table,th,td {
border: 1px solid black;
}<table>
<tr>
<td style="height:1px;">
<div style="border:1px solid red; height:100%;">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is higher
<br/>than the
<br/>first one
</td>
</tr>
</table>通过设定height的td到1px,孩子div可以设置height:100%.在Chrome和IE中,100%它被解释为"单元格的高度",而在Firefox中它似乎成为divs内容所需的最大高度 .
在Firefox中运行上面的示例将直观地说明这一点......
所以,我正在寻找一种在Firefox中也能运行的解决方案.
推荐指数
解决办法
查看次数
当浏览器窗口最大化后恢复时,为什么我的高度修复代码工作错误？
<!DOCTYPE html>
<html style = 'height: 100%;'>
<head>
<title>test manual height calculations</title>
</head>
<script type = 'text/javascript'>
window.onresize = fixHeighs;
function endsWith(str, suffix)
{
if (!str)
return false;
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
function fixHeighs(start_elem)
{
if (start_elem && start_elem.target) // if this is event, then make var null
start_elem = null;
var curr_elem = start_elem ? start_elem : document.body; // determine what element we should check now
var neededHeight = curr_elem.getAttribute("data-neededHeight"); // get data-neededHeight attribute
if …推荐指数
解决办法
查看次数
显示内的跨浏览器全高元素：table-cell
我写这个问题是为了巩固该网站上的多个类似问题，并最终得到该问题的正确的是或否答案。一些现有的答案被错误地标记为正确，而实际上它们无法正常工作。
已阅读相关问题。
- 高度：<div> 内的 <div> 为 100%，显示：表格单元格
- 使用表格单元格中的 css 使内部 div 高度为 100%
- td 内的全高 div
- 表格单元格中的 DIV 拉伸至高度 100%
- 让 div 占据整个单元格高度
- 如何让<div>填充<td>高度
给出以下标记：
<div class="equal-height">
<div class="col-50">
<div class="cell-fill">
...
</div>
</div>
<div class="col-50">
<div class="cell-fill">
...
</div>
</div>
</div>
在以下浏览器中，是否可以仅使用 CSS 使cell-fill具有该类的 div跨越其容器高度的 100% ？
- Chrome - 最新
- 歌剧 - 最新
- Safari - 最新
- 火狐 - 最新
- IE9+
我能得到的最接近的是这个例子：
给出的版本适用于最新的 Chrome、Opera、Safari 和 Firefox。它也适用于 IE11，但无法在 IE9 和 IE10 上填充完整高度。 …
推荐指数
解决办法
查看次数