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

Question

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

中的数据

我在 div 上使用 float: none 并在所有项目上使用 float: left 已经接近我想要的效果，它们正确对齐但是当我尝试在 height: 100% 上他们在整个 window 上扩展的按钮，这不是我想要的。

在怪癖模式下，我可以用

实现类似的东西

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

在意外测试中起作用，因为我的屏幕尺寸匹配，所以它显示的就像我想要的那样，但是一旦我调整了 window 的大小或添加了 <!DOCTYPE html>.[=18，这就改变了=]

有什么方法可以不使用 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>

或者你可以考虑另一种table结构但是你需要调整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>

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

Set Button height to 100% of parent element without setting parent height

html

css

html-table

htmlbutton