当容器对于表太小时触发滚动条

Question

下面的div结构放在div的另一个框架中，在宽度和高度方面都是灵活的。当外围容器变得太小时，我试图使表可滚动。图像是可拉伸的，并且始终位于底部，如果区域变宽/变窄，则将保持方位，因此高度将变化。当有足够的空间时，下面的html / css显示一切正常，但是当区域变小时似乎没有触发滚动条。该表可以具有随机数量的行，但是如果高度/宽度超过了外部专用的空间，则应该启动滚动条。如何实现此目的？我已经阅读了这里发布的类似问题，但是没有任何建议似乎有任何效果，绝对没有滚动条显示，看起来表格div只是在图像div后面滑动而不是在剩余空间中被“挤压”，当我尝试通过浏览器调试器中的DOM元素查看器获取它时。我猜我需要指定表和图像div的高度，但图像高度可以是任何东西，即如果我指定一个百分比，它可能会导致间隙，我尝试使用自动，但它似乎没有帮助。

HTML：

<div id="alldiv">
   <div id="areadiv">
      <table class="StandardTextStyle" border="0">
         <tbody>
            <tr>
               <td>Description:</td>
               <td>Processed Orders</td>
            </tr>
            <tr>
               <td>Server Instance:</td>
               <td>dbServer\sql2016</td>
            </tr>
            <tr>
               <td>Database Name:</td>
               <td>Orders</td>
            </tr>
            <tr>
               <td>Owner:</td>
               <td>dbo</td>
            </tr>
         </tbody>
      </table>
   </div>
   <div id="logodiv">
      <img src="logo.png">
   </div>
</div>

CSS：

#alldiv {
   width: 100%;
   height: 100%;
}

#logodiv img {
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   height: auto;
}

#areadiv {
   overflow:auto;
   margin-top:20px;
   top: 0;
   height: auto;
}

Answer 1

有两种方法可以实现这一目标：

1。放弃position:absolute ...

用于图片并使用flex与flex-direction:column一起使用。为此，容器（网格系统中的单元格）必须具有一组物理height（在此示例中，我在height:100vh上使用body - 您不应该复制在你的项目中，顺便说一下）：

#alldiv {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#logodiv img {
  width: 100%;
  flex: 0 0 auto;
}
#logodiv img {
  float: left;
}
#areadiv {
  flex: 1 1 auto;
  overflow:auto;
  margin-top:20px;
  top: 0;
  height: auto;
}

/* Do not copy the code below this line to your project! */
body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

<div id="alldiv">
   <div id="areadiv">
      <table class="StandardTextStyle" border="0">
         <tbody>
            <tr>
               <td>Description:</td>
               <td>Processed Orders</td>
            </tr>
            <tr>
               <td>Server Instance:</td>
               <td>dbServer\sql2016</td>
            </tr>
            <tr>
               <td>Database Name:</td>
               <td>Orders</td>
            </tr>
            <tr>
               <td>Owner:</td>
               <td>dbo</td>
            </tr>
         </tbody>
      </table>
   </div>
   <div id="logodiv">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" /></div>
</div>

2。 ...或使用javascript

在window load和resize个事件中，根据padding-bottom的当前高度更改网格单元格容器的<img>。考虑到你在问题上的标签，我假设你对这个解决方案不感兴趣，但如果你需要，我可以提供一个例子。