<分区>
<分区>
好的，我有一个元素应该位于我的页面底部。问题是在某些页面上，我有一些元素会根据 click() 函数上下滑动。 当页面加载时，该元素自然位于底部，因为页面有足够的内容将其向下推。
当用户单击一个使同级向上滑动的元素并因此使该元素与其一起向上滑动直到它到达下一个“可见”元素时，这会变得很棘手。
我或多或少想要做的是，如果内容不多，它会保持在屏幕底部，当有足够多的可见内容时，它会相对于上面的同级元素定位自己。希望它有意义
这是页脚
<footer>
<div class='container'>
<span>
<h2><b>Contact</b></h2>
<b>Telephone:</b> +45 000000<br/>
<b>Email:</b> management@EXAMPLE.com
</span>
<span>
<h2><b>FAQ</b></h2>
Some text<br/>
Some other text
</span>
<span>
<h2><b>Some header</b></h2>
<?php
if(date('Y') == '2019'){
echo 'example © 2019';
} else {
echo 'example © 2019-'.date('Y');
}
?>
</span>
</div>
</footer>
--- CSS ---
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
footer
{
color: #FFF;
background: #d99741;
padding: 20px;
margin-top: 20px;
}
footer span
{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
footer h2
{
position: relative;
margin-top: -10px;
}
--- 上面同级的 Html ---
echo "
<section id='displayevents'>
<div class='container'>
<div class='eventCountry'>
<p>".$trim."</p>
</div>
<div class='framework''>
<div class='imageFrames'>
<img src='".$image[0]."' />
<h3>".$club[0]."</h3>
</div>
<div class='imageFrames'>
<img src='".$image[1]."' />
<h3>".$club[1]."</h3>
</div>
<div class='imageFrames'>
<img src='".$image[2]."' />
<h3>".$club[2]."</h3>
</div>
</div>
</div>
</section>
";
---上下滑动的javascript---
<script type='text/javascript'>
$(document).ready(function(){
//Hides all .framework and then shows the first
var getamount = $('.framework');
for(var x=0;x<=getamount.length;x++){
$(getamount[x]).hide();
}
$('.framework').first().show();
//Creates a function that will handle the display of each .framework. Only
one at a time.
function openSection(element){
var display = element.css('display');
var find = $('.framework');
var getAttr;
if(display != 'none'){
$(element).slideUp(500);
} else{
for(var x=0;x<=find.length;x++){
getAttr = $(find[x]).css('display');
if(getAttr != 'none'){
$(find[x]).slideUp(500);
}
}
$(element).slideDown(500);
}
}
//Create clickfunction to .eventCountry and call function to hide/show
content
$('.eventCountry').click(function(){
openSection($(this).next());
});
});
</script>
最佳答案
一种解决方案是在 body 标记的底部添加填充，并使用 position:absolute;bottom:0 将页脚放置在创建的空间内。如果填充量已知，您可以在 CSS 中定义它，否则只需使用一点 JS。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
footer {
background-color:red;
position: absolute;
bottom: 0;
}
body {
/*padding-bottom: 90px; use this if the footer height is known*/
position: relative;
min-height: 100vh;
box-sizing:border-box;
}
/*for demo*/
body {
margin: 0;
}
h1 {
margin: 0;
}
</style>
</head>
<body id="body">
<h1>Qui officia deserunt mollit anim id est laborum.
Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Itaque earum rerum hic tenetur a sapiente delectus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
At vero eorunt mollitia. Esse cillum dolore eu fugiat nulla pariatur. Itaque earum rerum hic tenetur a sapiente delectus. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</h1>
<button>Slide Togle</button>
<h2 id="slide">Qui officia deserunt mollit anim id est laborum.
Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Itaque earum rerum hic tenetur a sapiente delectus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
At vero eorunt mollitia. Esse cillum dolore eu fugiat nulla pariatur. Itaque earum rerum hic tenetur a sapiente delectus. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</h1>
<footer id="footer">At vero eos et accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nihil molestiae consequatur, vel illum qui dolorem eum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum rerum hic tenetur a sapiente delectus. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat.
</footer>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
var h = document.getElementById('footer').scrollHeight;
document.getElementById('body').style.paddingBottom = h+'px';
$('button').click(function(){
$('#slide').slideToggle("slow");
});
</script>
</body>
</html>关于jquery - 将页脚元素放置在页面底部，与其之前的兄弟元素相对应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57714106/