所以我有一个底部div，它需要在所有屏幕尺寸上固定，并且当屏幕尺寸足够小时，其余的上部内容才滚动。
var counter = 0;
function addRow() {
//copy the table row and clear the value of the input, then append the row to the end of the table
$("#clonedtable tbody tr:first").clone().find("input").each(function () {
// $(this).val('');
}).end().appendTo("#clonedtable");
counter++;
// $("#removeclone").removeAttr("disabled");
};
$("#clonedtable").on('change','#departments',function () {
// alert($(this).val());
$dep_id = $(this).val();
$(this).closest("td").next("td").find(".Sub_departments option").remove(); // this works fine
// $(this).closest("td").next("td").find(".Sub_departments option").append('<option value=' +0+ '><--Select Sub Department--> </option>');
$.ajax({
url: 'get_sub_departments/'+$dep_id+'',
type: 'GET',
data: data,
dataType: 'json',
success: function (data) {
alert($(this).val());
// $(this).closest("td").next("td").find(".Sub_departments option").remove();
$(this).closest("td").next("td").find(".Sub_departments").append('<option value=' +0+ '><--Select Sub Department--> </option>'); //this won't work inside ajax but works outside of it
for (var i = 0; i < data.length; i++) {
$(this).closest("td").next("td").find(".Sub_departments").append('<option value=' + data[i].id + '>' + data[i].sub_department + '</option>'); //this won't work inside ajax but works fine outside
}
}
});
});
在此期间，我已经将.mainContainer {
display: flex;
flex-direction: column;
overflow-y: scroll;
text-align: center;
position: fixed;
top: 0;
bottom: 70px;
width: 100%;
}
.fixedBottom {
display: flex;
flex-direction: row;
padding: 10px 10px;
justify-content: space-around;
bottom: 0;
position: fixed;
width: 100%;
}
放到较低的位置，否则bottom: 70px的页面将无法滚动整个页面，因为固定了div底部，从而阻碍了它的发展。好吧，这种设置实际上可以在chrome，moz和Opera上正常运行，但不能在safari上运行，我的下层div是白色大声笑，但是元素在那里。
更新：（临时解决方案）由于底部div是固定的，无论如何它都将位于页面底部，请将0放在fixedBottom之外。 mainContainer成为mainContainer的同级元素，并将这些元素包装到div中。但是，我仍然希望fixedBottom成为父元素。