个人中心
gpt4 book ai didi

javascript - 在表格单元格内拉伸(stretch)的 div 垂直溢出

转载 作者：行者123 更新时间：2023-11-28 03:41:19 25 4
gpt4 key购买 nike

基本问题已在本论坛中多次提出，但从未得到令人满意的回答，IMO。如何在表格单元格内拉伸(stretch) div 以使其填充单元格(垂直、水平或两者)？

Make a div fill an entire table cell

Stretch div to 100% of height in a table cell

Streching div vertically inside a table cell

How can I scale a div to 100% height and width inside of another element

Full height div inside td

100% height div inside a display:table-cell div

等等等等

是的，我知道当我应该完全通过优雅的 CSS 创建表格时，我会被认为是考虑在表格单元格中嵌入 div 的另一个化石，正如 Rachel Andrew 和 Kevin Yank 在 Everything 中所赞美的那样你知道 CSS 是错误的! (2008)。但是在试用了他们和其他人所写的内容之后，我并没有留下深刻的印象。他们“成功”的秘诀在于依靠 display:table 系列属性来创建 CSS“表格”，那么您最终会得到什么？一个 div(框)充当表格、表格行或表格单元格。你不能让它的 Angular 变圆(我需要在表格单元格中嵌入一个 div 的原因之一)，没有跨越行和列的规定(我需要)并且你不能将任何封闭的 div 拉伸(stretch)到全高将它嵌入另一个盒子或 table 中，所以就这个问题而言，你回到原点。表格不能构成好的 div，反之亦然。

正如上述链接帖子之一中提到的那样，基本问题是表格单元格不会自愿将其高度(以像素为单位)提供给任何包含的 div，因此包括“height:100%”甚至“min-height:100”样式表中没有其他解决方法的 %"将被忽略。单元格是单元格，div 是 div，两者永远不会相遇，除非你对 Javascript 很得心应手，而我不是。我只是想要一个非脚本的、健壮的标记，使特定 div 的垂直高度与封闭表格单元格的垂直高度相匹配，这样如果相邻的单元格更高，我的 div 将随着整行的拉伸(stretch)而拉伸(stretch)，以保持 100%。

我不想使用 position:absolute;顶部:0；底部:0 以像素为单位定义单元格高度，因为行高将取决于最高单元格的高度。

好吧，我以为我真的实现了 chalice ，如下所示。这是一个包含 3 个 div(实际上是 HTML5 中的导航)的单行表格。我希望中间的(即第二个)拉伸(stretch)到该行的整个高度。 (添加 - 因此当文本附加到第 1 列或第 3 列或从中删除时，从而扩展或收缩整行的垂直高度，第 2 列将始终保持在包含它的单元格的完整垂直高度。这意味着如果相邻的列包含更多文本，则文本下方有额外的空白(粉红色空间，请参见代码!)。此外，第 2 列包含的文本是否多于第 1 列或第 3 列也没有关系；就我而言，它们可以缩小.)

    <!DOCTYPE html>
  <html>
  <html lang="en">
    <meta charset="utf-8">
    <title></title>
    <link href="style4.css" rel="stylesheet">
  </head>
  <body>

    <table id="tbl_main" border="1" style="width:60%; table-layout:fixed">
    <!-- Creates columns of equal width -->

      <tr class="v_align_top">
        <td><nav id="col1" class="normal">COL 1 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

  Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. </nav>
        </td>

        <td height="100%">
          <table id="tbl_inner">
            <tr>
              <td style="height:100%">
                <nav id="col2" class="vstretch">COL 2 Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
               </nav>
             </td>
            </tr>
          </table>
        </td>

        <td><nav id="col3" class="normal">COL 3 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</nav></td>
      </tr>
    </table>

  </body>
</html>

这是 CSS:

#tbl_main {
    border: 1px solid black;
    border-collapse:collapse;
}

#tbl_inner {
    border: 1px solid black;
    border-collapse:collapse;
  height:100%;  /* min-height doesn't work here */
}

tr.v_align_top{
    vertical-align: top;
}

.normal {
    border-radius: 20px 20px 20px 20px;
    border: 3px solid rgb(0, 0, 0);
    padding: 10px;
}

.vstretch {
    border-radius: 20px 20px 20px 20px;
    border: 3px solid rgb(0, 0, 0);
    padding: 10px;
}

#col1 {
    background-color: rgb(220, 220, 220);
    margin:5px;
}

#col2 {  /* stretch to 100% height of table cell */
    background-color: rgb(255, 220, 220);
    margin:5px 5px 5px 5px;
  height:100%;
}

#col3 {
    background-color: rgb(220, 220, 220);
    margin:5px;
}

(已添加)您可以在这里玩:jsFiddle link

这是它的外观(Windows 7 上的 Firefox 10):

3 cell table

不幸的是，由于我的帖子还不够多，还没有获得直接发布图片的权利，您将不得不使用此链接。

我故意让表格边框可见。哎呀。中间的 div 延伸到封闭表格的下方，无论我是在 Col 1 中添加还是减去文本，看起来都是相同数量的像素。多么奇怪。将 #col2 的高度减小到 95% 不是解决方案，因为它只是一个波动的近似值。

那么近又那么远。从bottom-margin: -10px 到border-spacing: 20px 我能想到的都试过了都没有解决这个问题。任何人都可以提出一个答案，或者想出一些简单的 Javascript 来一劳永逸地解决它吗？非常感谢。

最佳答案

这是我对这个问题的解决方案: Table stretched by content height

最初的想法从这里开始

table
{
    table-layout: fixed;
}

关于javascript - 在表格单元格内拉伸(stretch)的 div 垂直溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10764086/

25 4 0
文章推荐： performance - HTML5 微数据 : How to prevent increasing the file size through Microdata
文章推荐： php - 如何从文本文档中获取 2 个数据点？
文章推荐： html - 尝试将 text_area 内的文本转换为 HTML
文章推荐： css - 使用内容更改 DIV 宽度并将其放置在中心。
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com