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

-1

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

我想要的是以某种方式适合具有与父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; 
}

来源

2017-08-05 Polisas

没有工具可用于将img转换为HTML，CSS。所以你必须在这里粘贴你的代码 – Sankar

如果图像和注释部分是兄弟然后

删除任何height属性（最小高度，最大高度，身高）
给他们的父母display: flex;和
给align-items: stretch评论部分。

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

来源

2017-08-05 16:01:20

是的，我会尝试，如果它不会工作，我会发布HTML/CSS！ :) – Polisas

附加题：

标题标签未关闭。
页脚不需要固定。

解决方案：

前。点评容器添加结束的div标签
删除的CSS .footer
制作。员额，细节容器显示为Flex和方向
Set .comments-container flex-grow as 1

工作代码在https://jsfiddle.net/ou21qe09/

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

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

来源

2017-08-05 19:45:32 prolific

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

回答

相关问题