Question

我遇到了问题，我是CSS新手，并且无法弄清楚如何动态拉伸评论部分以适应身高。右div的高度由图像宽度决定，所以我不能设置右div的静态高度，也不能在注释div上设置min-height和max-height，因为它不适合更大的图片。

我想要的是以某种方式适合评论部分，其高度与父div的高度相关的50％。

任何想法如何使它工作？一些想法足以让我们看到正确的方向。不要关心旧的IE版本，所以最新的CSS添加是可行的，如果它与css的麻烦，javascript也是一个选项。

<div class="post-container">
    <div class="image-container">
      <div class="image-holder">
        <img class="image" src="http://www.onionlegal-fortstjohn.ca/wp-content/uploads/2015/03/300x600-Half-Page-Display-Ad-Placeholder.jpg"/>
      </div>
    </div>
    <div class="post-details-container">
      <div class="header">
        <div class="image-container">
          <div class="image-holder">
            <img
              class="profile image"
              src="https://i.stack.imgur.com/7lf40.gif"
            />
          </div>
          </div>
          <ul class="comments-container">
            <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
             <li class="comment">
              <span>
               author
              </span>
              <span>
                This is comment text
              </span>
            </li>
        </ul>
         <div class="footer">
        FOOTER ALWAYS ON BOTTOM
        </div>
        </div>

CSS

 .post-container {
  display: flex;
  border: 1px solid #e6e6e6;
  flex-direction: row;
  max-width: 906px;
  background-color: #fff;
}
.header {
  padding-bottom: 15px;
  padding-top: 15px;
  margin-right: 20px;
  margin-left: 20px;
  flex-direction: row;
  align-items: center;
}
.image {
  height: auto;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.profile {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.comments-container {
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-width: 280px;
}
.comment {
  margin-bottom: 15px;
}
.footer {
  bottom: 0;
  position: fixed;
}

Answer 1

如果图像和评论部分是兄弟姐妹，那么

删除任何高度属性（min-height，max-height，height）
将display: flex;提供给他们的父母
将align-items: stretch发表评论部分。

我可能会犯任何错误，因为这类问题应该有演示链接，或者你应该在这里分享你的html和css。

Answer 2

其他问题：

标题标记未关闭。
不需要修复页脚。

解决方案：

在.comments-container
删除.footer的css
将.post-details-container显示为弹性和方向为列
将.comments-container设置为flex-grow as 1

https://jsfiddle.net/ou21qe09/

的工作代码

.post-details-container {
    display: flex;
    flex-direction: column;
}

.comments-container {
    flex-grow: 1;
}

拉伸div以适合内容，高度由图像宽度决定

2 个答案: