如何在添加内容时自动调整div高度？

I am creating a mobile app where a user will post content to a feed. For each post would have a separate div area where he can add content and a pic. The problem is that when I paste a dummy text and a photo all in the same div, the height is off and not adjusting itself.

我正在创建一个移动应用，用户可以将内容发布到Feed。对于每个帖子，将有一个单独的div区域，他可以在其中添加内容和图片。问题是当我将虚拟文本和照片全部粘贴在同一个div中时，高度关闭并且不会自行调整。

The pic below has the grey background area fully covered when I set it to a specific height

当我将其设置为特定高度时，下面的图片将灰色背景区域完全覆盖

Here is what it looks like now when I set the height to auto. Notice the grey background area is cut short.

以下是我将高度设置为auto时的样子。请注意，灰色背景区域被缩短。

The goal is for the div area to auto adjust to the height despite the content the user adds. I have tried height:auto, height:auto !important, height: 100%, height:100 !important, and overflow:hidden. None of those gave me the results I wanted. What would be the best way to make the grey background area cover everything automatically? I would accept an answer that uses JavaScript or jQuery to make that happen.

尽管用户添加了内容，但目标是div区域自动调整到高度。我试过高度：auto，height：auto！important，height：100％，height：100！important，overflow：hidden。没有人给我我想要的结果。什么是使灰色背景区域自动覆盖所有内容的最佳方法？我会接受一个使用JavaScript或jQuery来实现这一目标的答案。

HTML

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

CSS

.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;
}       

1 个解决方案

#1

As long you don't have position:absolute in your stylesheet everything will fall into place, make sure your position is set to relative and leave height at auto (which should be default)

只要你没有位置：样式表中的绝对值，一切都会落到位，确保你的位置设置为相对位置并将高度保留为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>