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

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

我无法将中心分隔线一直延伸到可滚动的柔性框的底部。我在第三个子div元素中尝试过，但这一行只出现在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;
}

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

这种方法有一个问题——只有当内容比容器高时，它才能正常工作，否则竖直线将停止在在中间。请参阅底部的另一种方法。

jsFiddle

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;
}

<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>

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

jsFiddle

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%;
}

<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>

相关内容

最新更新

热门标签：