我有一个高度可变的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/
您可以尝试将属性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>
将position: absolute;
添加到 CSS
.slide_image_person {
position: absolute;
bottom: 0;
}