适合容器而不溢出身体答案

【问题标题】：Fit the container without overflowing the body适合容器而不溢出身体
【发布时间】：2021-02-11 05:34:28
【问题描述】：

我想将乘法表放入 body 元素中，以便它保持在 bode 的边界内，并在调整页面大小时自动调整。

现在看起来像这样（表格超出了正文边界）：

我试过了：

display: block;
overflow: auto;

但它什么也没做。我用这篇文章作为参考：Div height 100% and expands to fit content

简化的 HTML：

<div class="container">
   <table id="multTable"></table>
</div>

简化的 CSS：

html {
  background-color: #9FA5FF;
  height: 100%;
}

body {
  background-color: #E2E3FF;
  margin: 0 auto;
  width: 70%;
  height: 100%;
}
#multTable {
  margin: auto;
  height: 200px;
  overflow-x:scroll;
  overflow-y:scroll;
  display:block;
}

【问题讨论】：

标签： html css

【解决方案1】：

让容器 div 可滚动怎么样？

html {
  background-color: #9FA5FF;
  height: 100%;
}

body {
  background-color: #E2E3FF;
  margin: 0 auto;
  width: 10%; /*Change to adequate size*/
  height: 100%;
}
.container {
  overflow: scroll;
  width: 100%;
}

#multTable {
  margin: auto;
  height: 200px;
  /*overflow-x:scroll;
  overflow-y:scroll;
  display:block;*/
}

<div class="container">
   <table id="multTable">
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   </table>
</div>

【讨论】：