Question

我正在尝试像Instagram帖子那样完成示例：https://www.instagram.com/p/BXgsKFLBczA/?taken-by=claymicro列表扩展但不会推倒页脚在我的例子中，如果我将margin-bottom添加到注释类，它会推高<div class="post-details-container">的高度，并且会有间隙。我想要的是增加评论之间的差距，但这应该增加<div class="body>容器的溢出，而不是扩展其他div并在图像容器中留下绿色差距。

Jsfiddle例子：https://jsfiddle.net/ou21qe09/2/

如果我添加超过5px的评论类，它会扩展并在图像容器中留下绿色空白。同时向<div class="header">添加填充顶部也会推动div高度并留下绿色间隙。请注意，我无法设置正文或评论容器的最大高度，因为图像大小不同并且确定<div class="post-details-container"高度

    .comment {
       margin-bottom:10px;
}

我该怎么办？在<div class="post-details-container">或其他一些解决方法上设置max-height？

非常感谢！如果需要更多解释，请告诉我:)。

Answer 1

溢出滚动应该允许你想要的任意数量的评论...但是有些东西显然不起作用。也许你应该重新思考一般布局 - 以及你如何使用flex-box：https://codepen.io/sheriffderek/pen/mMWRWY

标记

<div class="thing">

    <div class="left">
        <img src="https://placehold.it/1600x1300" alt="">
    </div>

    <div class="right">
        <header>
            header
        </header>

        <main>
            <h2>main comments?</h2>

            <ul>
                <li>comment</li>
                <!-- ... -->
            </ul>
        </main>

        <footer class='footer1'>
            footer 1
        </footer>

        <footer class='footer2'>
            footer 2
        </footer>
    </div>

</div>

书写笔：

.thing
    display: flex
    // border: 2px solid red
    .left
        flex-basis: 70%
        img
            display: block
            width: 100%
            height: auto
    .right
        flex-basis: 30%
        //
        display: flex
        flex-direction: column
        h2
            padding: 10px 0
            font-size: 20px
            margin-bottom: 10px
        header, main, footer
            padding: 10px
        header
            flex-grow: 0
            background: gray
        main
            flex-grow: 0
            // border: 2px solid blue
            overflow: scroll
            ul
                li
                    margin-bottom: 10px
        footer
            background: gray
            flex-grow: 0
        .footer1
            background: lightgreen

编译CSS：

.thing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.thing .left {
  -ms-flex-preferred-size: 70%;
      flex-basis: 70%;
}
.thing .left img {
  display: block;
  width: 100%;
  height: auto;
}
.thing .right {
  -ms-flex-preferred-size: 30%;
      flex-basis: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.thing .right h2 {
  padding: 10px 0;
  font-size: 20px;
  margin-bottom: 10px;
}
.thing .right header,
.thing .right main,
.thing .right footer {
  padding: 10px;
}
.thing .right header {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  background: #808080;
}
.thing .right main {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  overflow: scroll;
}
.thing .right main ul li {
  margin-bottom: 10px;
}
.thing .right footer {
  background: #808080;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
.thing .right .footer1 {
  background: #90ee90;
}

Answer 2

我只是改变你的JsFiddle上的东西..看看吧。 Modified JSFiddle

.body {background: yellow;padding: 0 15px 0 15px;height: 50vh;overflow-y: auto;}

增加<li> margin-bottom而不推动底部div

2 个答案:

标记

书写笔：

编译CSS：