如何在td100%的情况下获得div高度100%?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (682)

这个问题似乎至少在堆叠溢出问题上被问过至少10次,但实际上没有一个问题给了我答案,因为问题出现在Firefox中。

有一个table高度100%tr高度100%。我设置了td的边界。我看到td和预期的一样是100%。我放了一个div在那td并将其设置为100%高。Chrome是100%。但在火狐中不是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>
<body>
<div id="content">
  <table>
    <tr>
      <td>
        <div id="container">
          <div class="full">
            foo
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

    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;
    }
    #container {
        width: 100%;
        height: 100%;
        border: 10px solid black;
    }
    <div id="content">
      <table>
        <tr>
          <td>
            <div id="container">
              <div class="full">
                foo
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>

在Chrome中:

 bbbbbbbbbbb
 b#########b
 b#rrrrrrr#b
 b#r     r#b
 b#r     r#b
 b#r     r#b
 b#rrrrrrr#b
 b#########b
 bbbbbbbbbbb

而在Firefox中

 bbbbbbbbbbb
 b         b
 b#########b
 b#rrrrrrr#b
 b#r     r#b
 b#rrrrrrr#b
 b#########b
 b         b
 bbbbbbbbbbb

其中b=蓝色td#=黑色div,应该是100%。r=红色内部div,也应该是100%。是那个黑色的错。

在这种情况下,我需要修复哪些CSS才能让Firefox表现得像Chrome?

提问于
用户回答回答于

火狐需要所有元素在CSS中有100%高,包括TD。

#content>table>tbody>tr>td {
    border: 10px solid blue;
    width: 50%;
    height: 100%;
}

热门问答

主库的binlog被删掉了,从库是否可以用对应的Relay_Log_File同步?

朱明豪从事Oracle、MySQL等数据库工作10年,擅长性能诊断优化、故障处理、SQL优化、业务架构设计、技术培训等。
推荐
1.Waiting for Slave Workers to free pending events, 可能是出现大事务,可能参数slave_pending_jobs_size_max过小 2.“主库设置了expire_logs_days,所以从库的Relay_Mas...... 展开详请

CDN加速时,当带宽超出所设置阈值后关闭CDN服务,是否可以自动重启CDN服务?

开元

腾讯云 · 高级工程师 (已认证)

专注给云上客户提供优质的服务
推荐

触发封顶带宽导致域名关闭后,若您希望继续使用 CDN 服务,可以在重新启动域名加速。

详见https://cloud.tencent.com/document/product/228/7541

是否提供海外CDN加速服务(微信小程序云)?

开元

腾讯云 · 高级工程师 (已认证)

专注给云上客户提供优质的服务
推荐

目前腾讯云是支持海外加速的,CDN加速只和域名有关系,只需要把需要海外加速域名配置海外CDN就就可以。详细见:https://cloud.tencent.com/document/product/673

Dr.Elephant支持hadoop3吗?还有编译一直有包找不到怎么解决?

目前TBDS的hadoop版本是2.7.2,建议配置文件中使用该版本号进行匹配

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

iOS实时音视频的SDK和Demo有没有Objective-C版本?

腾讯视频云-ZacharyTXLiteAVSDK技术支持
推荐
下载专业版和企业版的压缩包里面带的官方demo是Objective-C的,下载地址:https://cloud.tencent.com/document/product/647/32689 image.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券