适合容器而不溢出身体

Posted 2023-03-06

【中文标题】适合容器而不溢出身体

【英文标题】：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;

【参考方案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>