Question

我的问题是讨论列（红色和绿色）正在拉伸页面而不是拉伸到.content的高度并保持这种方式。虽然我可以将讨论框的高度设置为固定的高度，但我更愿意尝试并充分利用用户的屏幕空间提供的内容，如果可以的话，最好不要使用JS hack。 / p>

我现在唯一想到的可能是绝对定位html，身体和内容，但如果我能避免那么做那么好，因为它可能会在以后回来咬我。

有人对此有任何建议吗？或者我应该让自己解决绝对定位？

我保持标记很好很简单，没有任何绒毛，我的实际标记有点多，但它的本质是那里

HTML：

<div class="header">
  Header.
</div>

<div class="content">
  <div class="discussion">
    <h4>Discussion Title</h4>

    <div class="comments"> <!-- Should scroll. -->
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
    </div>
  </div>

  <div class="other-discussion">
    <h4>Discussion Title</h4>

    <div class="comments"> <!-- Should scroll. -->
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
    </div>
  </div>
</div>

CSS：

.header {
  height: 100px;
  background: blue;
}

.content {
  display: flex;
  flex-direction: row;
  padding-bottom: 100px;
}

.discussion, .other-discussion {
  background: red;
  width: calc(50% - 40px);
  margin: 20px;
}

.other-discussion {
  background: green;
}

.comments {
  overflow-y: auto;
  color: white;
}

.comment {
    padding: 20px;
  margin-bottom: 10px;
}

Answer 1

如果你html, body { height: 100% }会使页面成为文档的高度。不确定这是否是您正在寻找的，但这是一个更新的笔：

http://codepen.io/anon/pen/avGdpm

Answer 2

@woestijnrog发布了this CodePen，它解决了我遇到的问题。

Permalink to Comment

HTML

<div id='wrapper'>
<div class="header">
  Header.
</div>

<div class="content">
  <div class="discussion">
    <h4>Discussion Title</h4>
 <div class='stuff'>stuff</div>

    <div class="comments"> <!-- Should scroll. -->
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
    </div>
  </div>

  <div class="other-discussion">
    <h4>Discussion Title</h4>
    <div class='stuff'>other stuff</div>

    <div class="comments"> <!-- Should scroll. -->
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
      <div class="comment">Foo.</div>
    </div>
  </div>
</div>    
</div>

CSS

#wrapper {
        border: 1px solid black;
        height: 85vh;
        display: flex;
        flex-direction: column;
        padding-bottom: 50px;
    }
    .header {
        height: 100px;
        background: blue;
        margin: 20px;
    }
    h4 {
    }
    .content {
        flex: 1;
        display: flex;
        flex-basis: 45%;
        justify-content: space-around;
      overflow: hidden;
    }
    .stuff {
        background: #ccc;
    }
    .discussion .stuff {
        flex: 0 0 60px;
    }
    .other-discussion .stuff {
        flex: 0 0 150px;
    }
    .discussion, .other-discussion {
        background: red;
        width: calc(50% - 40px);
        display: flex;
        flex-direction: column;
    }
    .other-discussion {
        background: green;
    }
    .comments {
        color: white;
        flex: 1 1 auto;
        overflow-y: auto;
    }
    .comment {
        margin: 25px;
    }

Flexbox列子项拉伸页面而不是使用overflow-y

2 个答案: