Question

我有这样的布局。不是最好的布局，但它是一个与我拥有的现实世界项目尽可能接近的人为示例。

几个div包含一个带有页脚的3列布局。

我需要内部容器的高度只能与第二个内容列一样高。
第二列中的内容是一个数据表，可能只有一行，但可能有20行。
它需要显示页面加载时的所有行。
页脚必须保留在底部。

问题是我的大型侧边栏将其扩展得远远超出了需要。

.cont {
  height: 100vh;
}

.inner-cont {
}

.row {
  display: flex;
  flex-direction: row;
}

.content-1 {
  display: flex;
  flex-direction: column;
  width: calc(20% + 0px);
  height: 100%;
  max-width: 300px;
  min-width: 200px;
  overflow-y: auto;
}

.content-2 {
  flex-direction: column;
  flex-grow: 1;
  width: 540px;
  position: relative;
  height: auto;
  overflow-y: auto;
}

.content-3 {
  position: relative;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  width: calc(25% + 30px);
  max-width: 300px;
  overflow: hidden;
}

.footer {
  height: 50px;
  position: relative;
}

<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>

<body>
  <div class='cont'>
    <div class='header'>Header</div>
    <div class='inner-cont'>
      <div class='row'>
        <div class='content-1'> <table>
            <tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr><tr>
              <td>really long sidebar content</td>
         
            </tr></table></div>
        <div class='content-2'>
          I need to grow and shrink
          <table>
            <tr>
              <td>cool awesome content</td>
            </tr>
            <tr>
              <td>cool awesome content</td>
            </tr>
            <tr>
              <td>cool awesome content</td>
            </tr>
           
            <tr>
              <td>cool awesome content</td>
            </tr>
            <tr>
              <td>cool awesome content</td>
            </tr>
            <tr>
              <td>cool awesome content</td>
            </tr>
            <tr>
              <td>cool awesome content</td>
            </tr>
         
            </tr></table>
        </div>
        <div class='content-3'>I am column 3 content</div>
      </div>
    </div>
    <div class='footer'>Footer</div>
  </div>

</body>

</html>

如何将父容器的高度设置为等于最小高度的子容器的高度？

0 个答案: