拉伸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以適應內容，高度由圖像寬度決定

回答

相關問題