将按钮高度设置为父元素的 100%，而不设置父高度

Question

我有一个 div，其中包含一个按钮、一个表格和另一个按钮，我希望这些按钮位于表格的左侧和右侧，并且与表格具有相同的高度。按钮应该是用于更改表中数据的后退和前进按钮。

我已经接近了我想要在 div 上使用 float: none 和在所有项目上使用 float: left 的内容，这可以正确对齐它们但是当我在按钮上尝试 height: 100% 时，它们会在整个窗口上展开，这不是什么我要。

在怪癖模式下，我可以实现类似的效果

div {
    height: 50%;
}
    
button {
    height: 100%;
}
    
table {
    display: inline-block;
}

由于我的屏幕尺寸匹配，所以它在意外测试中起作用，因此它显示为我想要的，但是一旦我调整窗口大小或添加<!DOCTYPE html>，这种情况就发生了变化。

有什么方法可以在不使用display: flex 的情况下完成此操作？

HTML：

<html>
<head>
    <meta charset="utf-8">
    <title>Under construction</title>
    <link rel="stylesheet" href="../css/stylesheet.css" />
</head>

<body>

<div>
    <button>&larr;</button>

    <table style="border: none">
    <thead><th>a</th><th>b</th><th>c</th></thead>
         <tbody>
             <tr><td>A</td><td>B</td><td>C</td></tr>
             <tr><td>D</td><td>E</td><td>F</td></tr>
             <tr><td>G</td><td>H</td><td>I</td></tr>
         </tbody>
    </table>

    <button>&rarr;</button>
</div>

</body>

</html>

CSS：

td {
    background: green;
    border-radius: 7px;
}

Answer 1

position:absolute 似乎是这里的唯一解决方案：

td {
  background: green;
  border-radius: 7px;
}
.box  {
  border:1px solid red;
  position:relative;
  display:inline-block;
  padding:0 50px; /* 50px is considered to be the width of button so adjust it based on your case*/ 
}
.box button {
  position:absolute;
  top:0;
  height:100%;
  left:0;
}
.box button:last-of-type {
  left:auto;
  right:0;
}

<div class="box">
  <button>&larr;</button>

  <table style="border: none">
    <thead>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </thead>
    <tbody>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
      </tr>
      <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
      </tr>
    </tbody>
  </table>

  <button>&rarr;</button>
</div>

或者您可以考虑另一种表格结构，但您需要调整 HTML 代码：

.box table td {
  background: green;
  border-radius: 7px;
}

.box {
  border: 1px solid red;
  border-spacing: 0;
}
.box,
.box > tbody,
.box > tbody > tr > td{
  height:100%;
}

.box button {
  height: 100%;
}

<table class="box">
  <tr>
    <td><button>&larr;</button></td>

    <td>
      <table style="border: none">
        <thead>
          <th>a</th>
          <th>b</th>
          <th>c</th>
        </thead>
        <tbody>
          <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
          </tr>
          <tr>
            <td>D</td>
            <td>E</td>
            <td>F</td>
          </tr>
          <tr>
            <td>G</td>
            <td>H</td>
            <td>I</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td><button>&rarr;</button></td>
  </tr>
</table>