可变高度div内的静止图像[重复]答案

【问题标题】：Still image within variable height div [duplicate]可变高度div内的静止图像[重复]
【发布时间】：2020-03-25 13:04:38
【问题描述】：

我有一个高度可变的 div，这个高度是通过 javascript 更改的，我需要将其中的图像始终固定在页脚中。

$(document).ready(function(){
  $("#btn1").click(function(){
    $(".content").append("<br><br>Appended text</b>");
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid" style="background:url('https://place-hold.it/2000x700');background-size:cover;">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-8 content">	
        testestestestestestestestestestestestestestestestestes
        testestestestestestestestestestestestestestes
			</div>
				<div class="col-lg-4 col-4 slide_home_person" style="">
					<img src="https://place-hold.it/100x100/111/fff.png/000" class="slide_image_person" width="100%">
				</div>			
		</div>
	</div>
</div>

<button id="btn1">Append text</button>

https://jsfiddle.net/sNniffer/7zLeuhjm/2/

【问题讨论】：

它已经完成了，你只需要给 ('.slide_image_person') 类提供绝对位置

标签： html css

【解决方案1】：

在 CSS 中添加 position: absolute;

.slide_image_person {
  position: absolute;
  bottom: 0;
}

【讨论】：

【解决方案2】：

您可以尝试将属性position: absolute 添加到类slide_image_person：

$(document).ready(function(){
  $("#btn1").click(function(){
    $(".content").append("<br><br>Appended text</b>");
  });
});

.slide_image_person {
    bottom: 0px;
    position: absolute;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
        <div class="row">
            <div class="col-lg-8 col-8 content">    
        testestestestestestestestestestestestestestestestestes
        testestestestestestestestestestestestestestes
            </div>
                <div class="col-lg-4 col-4 slide_home_person" style="">
                    <img src="https://place-hold.it/100x100/111/fff.png/000" class="slide_image_person" width="100%">
                </div>          
        </div>
    </div>
</div>

<button id="btn1">Append text</button>

【讨论】：