Question

我有一个垂直中央自适应可滚动的flexbox元素，它本身应该有两列（我用两个子div解决了这个问题）。中央弹性箱应具有框架和中央分隔线。

我无法让中央分隔线一直运行到可滚动弹性框的底部。我尝试使用第三个子div元素，但该行只出现在flexbox的垂直范围内。

如何在可滚动的flexbox中创建两列，其中框架和中央分隔线一直运行到底部？

感谢您的帮助。

以下是示例： https://jsfiddle.net/soliman/0d0tn22x/2/

<body>
  <div class="wrapper">
    <div class="header">
      <h1>Header</h1>
    </div>

    <div class="content">

      <div class="leftContent"> Column 1
        With a lot of lines.
      </div>

      <div class="divider"></div>

      <div class="rightContent"> Column 2
        With fewer lines
      </div>
    </div>

    <div class="footer">
      Footer
    </div>
  </div>
</body>

CSS：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: black;
  color: red;
}

.wrapper {
  display: flex;
  /* use the flex model */
  height: 100%;
  flex-direction: column;
}

.header {
  margin: 1em 1em 0 1em;
}

.content {
  flex: 1 1 auto;
  display: flex;
  overflow-y: auto;
  position: relative;
  min-height: 100px;
  margin: 0 1em 0 1em;
  border: 6px double red;
}

.content > div {
  width: 50%;
  padding: 3%;
}

.content > div:first-child {
  margin-right: 10px;
}

.footer {
  margin: 0 1em 1em 1em;
}

.divider {
  position: absolute;
  left: 50%;
  top: 0%;
  bottom: 0%;
  border-left: 6px double red;
}

Answer 1

尝试这种混合的flexbox和CSS表格布局。您可以将内容区域设置为表格，将三列设置为表格单元格，因此它们始终具有相同的高度。

该方法存在一个问题 - 如果内容高于容器，它只能正常工作，否则垂直线将停在中间。请参阅底部的其他方法。

<强> jsFiddle

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow-y: auto;
  min-height: 100px;
  border: 1px solid;
}
.wrapContent {
  display: table;
  width: 100%;
}
.wrapContent > div {
  display: table-cell;
}
.leftContent,
.rightContent {
  width: 50%;
}
.divider {
  border-left: 1px solid;
}

＆＃13;

<div class="wrapper">
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    <div class="wrapContent">
      <div class="leftContent">
        <div style="height:500px;">Left</div>
      </div>
      <div class="divider"></div>
      <div class="rightContent">
        <div style="height:auto;">Right</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <p>Footer</p>
  </div>
</div>

＆＃13;

另一种方法是使用背景图像作为垂直线，将其设置为内容容器的中心，使用repeat-y，图像可以只是一个方形点。即使内容比容器短，它也能很好地工作。

<强> jsFiddle

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  display: flex;
  overflow-y: auto;
  min-height: 100px;
  border: 1px solid;
  background: url("http://i.imgur.com/oyQ4xsL.png") center top repeat-y;
  background-size: 1px;
}
.leftContent,
.rightContent {
  width: 50%;
}

＆＃13;

<div class="wrapper">
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    <div class="leftContent">
      <div style="height:500px;">left</div>
    </div>
    <div class="rightContent">
      <div style="height:auto;">right</div>
    </div>
  </div>
  <div class="footer">
    <p>Footer</p>
  </div>
</div>

＆＃13;

可滚动的flexbox div元素中的垂直分隔线

1 个答案: