时间戳

首页 > 解决方案 > 为什么，标签高度内的元素没有增加？

html - 为什么，标签高度内的元素没有增加？

问题描述

我正在尝试增加<td>标签内元素的高度。但是，高度没有增加。

更具体地说，我希望<p>标签内的<td>标签具有 100% 的高度。

代码是：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack Overflow</title>
    <!-- Local CSS -->
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
        }

        table {
            height: 100%;
            width: 100%;
        }

        td {
            background-color: aqua;
        }

        input {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        p {
            background-color: blueviolet;
            display: inline-block;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <table border="1">
        <tr>
            <th colspan="2"><input type="text" name="console" id="Console"></th>
        </tr>
        <tr>
            <td>
                <p onclick="one()">1</p>
            </td>
            <td>
                <p  onclick="two()">2</p>
            </td>
        </tr>
    </table>
</body>

</html>

标签： htmlcss

解决方案

在等待对我的评论的反馈时，这是一个网格布局示例，它可以执行您想要的操作，而无需指定height为pa 的直接子级grid。

它还模仿了table-layout没有副作用和额外标记的方法。

html,
body,
.border {
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
}

.border,
.border p {
  border: solid;
  padding: 2px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 grid-template-rows: 1fr 2fr ;  /* optionnal, here you can set heights for the rows */
  grid-gap: 2px;
}

input {
  height: 100%;
  width: 100%;
}

p:first-of-type {
  grid-column: span 2;
  padding:0;
}

p {
  background-color: blueviolet;
}
<div class="grid border">
  <p>
    <input type="text" name="console" id="Console">
  </p>
  <p onclick="one()">1</p>
  <p onclick="two()">2</p>
</div>

这可能对您有用：https ://css-tricks.com/snippets/css/complete-guide-grid/ 和 https://gridbyexample.com/开始；）

推荐阅读