带有Flexbox的垂直中心，可滚动列

Question

我希望有两个并排的列，每个页面宽度的50％。右列应该可以独立于左侧（overflow-y: scroll）滚动。

右列的内容是一个可变高度的表：如果表小于页面高度，则表应该居中;如果表长度超过页面高度（和溢出），则表应该有填充。

以下是我 WOULD 的行为示例：

溢出的长桌：

中心的短表：

＆＃13;

＆＃13;

.container {
  display: flex;
  overflow: hidden;
  height: 100vh;
  position: relative;
  width: 100%;
  text-align: center;
}

.left,
.right {
  overflow: auto;
}

.left {
  margin: auto;
  width: 50%;
}

.right {
  width: 50%;
  padding: 50px 0 50px 0;
  margin: auto;
}

＆＃13;

<div class='container'>
  <div class='left'>
    <h1>left</h1>
  </div>
  <div class='right'>
    <table> ... </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在margin: auto中添加最后.right正确地格式化表格，但是当表格很长并且溢出时会中断（反之亦然）。

任何帮助将不胜感激，谢谢！

Answer 1

首先，当你将容器高度设置为100vh时，它会导致主div重叠一点，你会在左边看到一个滚动条，你可以通过设置父HTML来删除滚动条元素重叠样式隐藏。

另一种方法是将容器高度设置为90vh 但那不是重点 你的问题是[.right {padding：50px 0 50px 0;}]导致右边的div从50px开始到高度+ 50px结束。
您可以通过设置[.right {padding：0;}]来解决此问题。

现在，为了使表居中，在表中添加另一个div [.tblWrapper]如下所述。

#!/usr/bin/perl
open A, "A";                   # open file "A" to handle A
open B, "B";                   # open file "B" to handle B
chomp(@keys = <A>);            # read keys to array, strip line-feeds
@counts{@keys} = (0) x @keys;  # initialize hash counts for keys
while(<B>){                    # iterate file handle B line by line
    foreach $k (@keys){        # iterate keys array
        if (/$k/) {            # if key matches line
            $counts{$k}++;     # increase count for key by one
        }
    }
}
print "$counts{$_} $_\n" for (keys %counts);

您还需要将CSS属性[position：relative;]添加到[.right]类

.tblWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);//translate to 45 because the table overflows from the top of the screen on -50% (same as with the main container height 90vh instead of 100vh)
}

您可以在此处详细了解 https://css-tricks.com/centering-css-complete-guide/

.right {
  position: relative;
  width: 50%;
  height: 100%;
}

.container {
  display: flex;
  overflow: hidden;
  height: 90vh;
  position: relative;
  width: 100%;
  text-align: center;
}

.left,
.right {
  overflow: auto;
}

.left {
  margin: auto;
  width: 50%;
}

.right {
  position: relative;
  width: 50%;
  height: 100%;
}

.tblWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%); 
}

JSFiddle示例：
https://jsfiddle.net/3b4761up/4/

Answer 2

如果您放弃自动保证金，而是将align-items: center;添加到container和max-height: 100vh;到.left, .right规则，那么您将得到您要求的内容

我也从width更改为flex-basis，这是在行方向上设置Flex项目宽度的首选方法。

html, body {
  margin: 0;
}
.container {
  display: flex;
  align-items: center;
  height: 100vh;
}
.left, .right {
  flex-basis: 50%;
  max-height: 100vh;
  overflow: auto;
}
.left {
  text-align: center;
}
.right {
  padding: 50px 0 50px 0;
  box-sizing: border-box;
}
.right table {
  width: 100%;
  text-align: center;
}

<div class='container'>
  <div class='left'>
    <h1>left</h1>
  </div>
  <div class='right'>
    <table>
      <tr>
        <td>Column1</td>
        <td>Column2</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>
  </div>
</div>