如何在div中放置表格和文本？

Question

以下代码呈现给：

但我想要这个：

如果我删除了<div>hello world</div>表格，那么表格很适合在外部div中。 但是我应该将文本添加到div中，并希望带有表格的文本完全适合外部div。任何人都可以给我任何建议吗？

＆＃13;

＆＃13;

<div style="background-color:green;border:1px solid red;width:81px;height:60px;">
  <div>hello world</div>
  <div style="height:100%;overflow:auto;background-color:red;opacity:0.4;">
    <table>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将overflow:hidden添加到包装元素

＆＃13;

＆＃13;

<div style="background-color:green;border:1px solid red;width:81px;height:60px;overflow:hidden">
  <div>hello world</div>
  <div style="height:100%;overflow:auto;background-color:red;opacity:0.4;">
    <table>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

初步回答

您需要在最外面的overflow: scroll添加<div>。因为这是你提供固定高度的那个。

＆＃13;

＆＃13;

<div style="background-color:green;border:1px solid red;width:81px;height:60px;overflow:scroll">
  <div>hello world</div>
  <div style="background-color:red;opacity:0.4;">
    <table>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

其他答案

使用calc（）

我没有给.inner 50px固定的高度，而是选择使用calc(100% - 1em)来计算身高。它需要.outer <div>的高度并减去单行文本的高度。这使得它比50px版本更易于维护，因为更改整个组件的高度现在需要更新一个而不是两个数字。

＆＃13;

＆＃13;

.outer {
  background-color: green;
  border: 1px solid red;
  width: 81px;
  height: 60px;
}

.inner {
  background-color: red;
  opacity: 0.4;
  height: calc(100% - 1em);
  overflow: scroll;
}

＆＃13;

<div class="outer">
  <div>hello world</div>
  <div class="inner">
    <table>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用position: absolute

另一种选择是给.outer <div>一个padding-top，并将.header置于padding-top之上。

首先让您的.outer position: relative允许.header position: absolute引用.outer <div>。如果您希望padding-top: 1em的高度基于内容和填充，请添加box-sizing: border-box和.outer。

接下来将position: absolute和top: 0添加到.header以定位它。

.inner获取height: 100%和overflow: scroll，让它占据.outer <div>内容的高度。

＆＃13;

＆＃13;

.outer {
  position: relative;
  box-sizing: border-box;
  padding-top: 1em;  
  background-color: green;
  border: 1px solid red;
  width: 81px;
  height: 60px;
}

.header {
  position: absolute;
  top: 0;
}

.inner {
  height: 100%;
  overflow: scroll;
  background-color: red;
  opacity: 0.4;
}

＆＃13;

<div class="outer">
  <div class="header">hello world</div>
  <div class="inner">
    <table>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

1）我已从第一个div中移除了高度，因为我们不打算在那里滚动子div

2）在第二个div而不是高度100％我给了一个50px的高度（你可以在px中给出任何高度），因为我们要滚动这个div

3）表格宽度100％将填充第二个div

---

＆＃13;

＆＃13;

<div style="width: 150px; border: 1px solid rgb(255, 0, 0); background-color: rgb(0, 128, 0);">
  <div>hello world</div>
  <div style="overflow: auto; background-color: red; opacity: 0.4; height: 50px;">
    <table style=" width: 100%;">
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
    </table>    
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;