콘텐츠를 추가 할 때 div 높이를 자동으로 조정하는 방법은 무엇입니까?

Question

사용자가 피드에 콘텐츠를 게시 할 모바일 앱을 만들고 있습니다. 각 게시물에 대해 콘텐츠와 그림을 추가 할 수있는 별도의 div 영역이 있습니다. 문제는 동일한 div에 모조 문서와 사진을 모두 붙여 넣을 때 높이가 떨어져 자체 조정이되지 않는다는 것입니다.

은 PIC 아래 내가 특정 높이 여기

로 설정하면 완전히 덮여 회색 배경 영역을 가지고 내가 자동으로 높이를 설정할 때 지금 모습입니다. 회색 배경 영역이 짧게 절단되어 있습니다.

목표는 사용자가 추가하는 내용에도 불구하고 높이 자동 조정에 사업부 영역입니다. 나는 height:auto, height:auto !important, height: 100%, height:100 !important 및 overflow:hidden을 시도했다. 그 중 누구도 내게 원하는 결과를주지 못했습니다. 회색 배경 영역이 모든 것을 자동으로 처리하도록하는 가장 좋은 방법은 무엇입니까? JavaScript 또는 jQuery를 사용하여 답변을 수락합니다.

HTML

<!-- Feed Begins --> 
<section class="feed section-padding"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <div class="FalconsFan1 text-center"> 
      <p>FalconsFan1</p> 
     </div> 
     <div class="-posts text-center"> 
      <p>497 posts</p> 
     </div> 
     <!-- Posts --> 
     <div class="container Second-Post"> 
      <div class="row"> 
      <div class="col-sm-12"> 
       <img src="img/bitmap_2.jpg" alt="" class="post-avatar"> 
       <h4 class='post-username'>FalconFans1</h4> 
       <small class="post-timestamp">32 seconds ago</small> 
       <p class='post-content'>Julio is the best receiver in the game right now!</p> 
       <img src="img/post-img.jpg" alt="" class="post-img"> 
       <ul class="polling-icons text-center"> 
       <li><img src="img/green-like-button.png" alt=""></li> 
       <li><img src="img/grey-dislike-button.png" alt=""></li> 
       <li><img src="img/grey-comment-button.png" alt=""></li> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <!-- Posts --> 
     </div> 
    </div> 
    </div> 
</section> 

CSS만큼 당신이 스타일 시트의 모든 일에 position:absolute이없는

.feed { 
    margin-top: -50% !important; 
} 

.FalconsFan1 { 
    /* width: 392px; 
    height: 78px; */ 
    font-size: 64px; 
    letter-spacing: 0.7px; 
    text-align: center; 
    color: #3f3f3f; 
    margin-left: -15%; 
} 

.-posts { 
    /* width: 208px; 
    height: 49px; */ 
    font-size: 40px; 
    letter-spacing: 0.5px; 
    text-align: center; 
    color: #3f3f3f; 
    margin-left: -15%; 
} 

.Second-Post { 
    object-fit: contain; 
    background-color: #f8f8f8; 
    height: auto; 
    width: 988px !important;  
} 

.Second-Post::after { 
    content: " "; 
    display: block; 
    clear: both; 

} 


.post-avatar { 
    position: absolute; 
    margin-top: 1%; 
    left: 5%; 
    width: 86px; 
    height: 88px; 

} 

.post-username { 
    position: absolute; 
    left: 20%; 
    font-size: 42px; 
} 

.post-timestamp { 
    position: absolute; 
    margin-top: 6%; 
    left: 20.5%; 
} 

.post-content { 
    position: absolute; 
    margin-top: 10%; 
    left: 20.5%; 
    width: 754px; 
    height: 70px; 
    font-size: 27px; 
    letter-spacing: 0.8px; 
    color: #3f3f3f; 
} 

.post-img { 
    position: absolute; 
    margin-top: 17%; 
    left: 20.5%; 
    width: 779px; 
    height: 588px; 
} 

.polling-icons { 
    list-style: none; 
    position: absolute; 
    margin-top: 80%; 
    left: 10%; 

} 

.polling-icons li { 
    padding: 0; 
    display: inline !important; 
    padding: 130px; 
}  

Answer 1

제자리에 떨어질 것이다, 당신의 위치가 relative로 설정되어 있는지 확인하고 auto에서 높이를 남겨 (기본값이어야 함)

#small_div { 
 
    padding: 2rem; 
 
    background: orange; 
 
} 
 
#large_div { 
 
    padding: 2rem; 
 
    background: lime; 
 
}

<div id="small_div"> 
 
    123 
 
</div> 
 
<div id="large_div"> 
 
1 In the beginning God created* the heaven and the earth. 2 And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters. 3 And God said, Let there be light: and there was light. 4 And God saw* the light, that it was good: and God divided* the light from the darkness. 5 And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day. 6 And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters. 7 And God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so. 8 And God called the firmament Heaven. And the evening and the morning were the second day. 9 And God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so. 10 And God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good. 11 And God said, Let the earth bring forth grass, the herb yielding seed, and the fruit tree yielding fruit after his kind, whose seed is in itself, upon the earth: and it was so. 12 And the earth brought forth grass, and herb yielding seed after his kind, and the tree yielding fruit, whose seed was in itself, after his kind: and God saw that it was good. 13 And the evening and the morning were the third day. 14 And God said, Let there be lights in the firmament of the heaven to divide the day from the night; and let them be for signs, and for seasons, and for days, and years: 15 And let them be for lights in the firmament of the heaven to give light upon the earth: and it was so. 16 And God made two great lights; the greater light to rule the day, and the lesser light to rule the night: he made the stars also. 17 And God set them in the firmament of the heaven to give light upon the earth, 18 And to rule over the day and over the night, and to divide the light from the darkness: and God saw that it was good. 19 And the evening and the morning were the fourth day. 20 And God said, Let the waters bring forth abundantly the moving creature that hath life, and fowl that may fly above the earth in the open firmament of heaven. 21 And God created great whales, and every living creature that moveth, which the waters brought forth abundantly, after their kind, and every winged fowl after his kind: and God saw that it was good. 22 And God blessed them, saying, Be fruitful, and multiply, and fill the waters in the seas, and let fowl multiply in the earth. 23 And the evening and the morning were the fifth day. 24 And God said, Let the earth bring forth the living creature after his kind, 
 
</div>