0
我已经详尽地搜索了一个解决方案,但已经干了。如何让一个固定在视口底部的酒吧成为页脚底部的酒吧
我正在创建一个页面,其中将包含大量文本,以便随时在视口底部固定一个内联窗体。
当到达页面的末尾时,我想让这个栏“变成”页脚,并且停留在最后一页内容的下面。
我的问题:如果我修复了此表单的位置 - 如此处所示 - 它位于页面底部并隐藏了我内容的最后一页。如果我删除了它的固定位置属性,它不会固定在列表顶部的视口底部。我开始使用一些jQuery解决方案,但我必须想象有一个更简单的/基于CSS的解决方案。
#entrybar {
background: #f1f1f1;
bottom: 0;
min-height: 100px;
padding: 0;
width: 100%;
position: fixed;
z-index: 100;
}
.entryform {
text-align: center;
margin-top: 25px;
margin-bottom: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" id="shoplist">
<div id="top">
<h1>Refer an expert: Your company's referrals</h1>
<p><em>Please scan through the technology list below, and use the form at the bottom to suggest any experts in your network that might be a good fit.</em></p>
</div>
<hr>
<div id="middle">
<h2>Topic 1</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla leo odio, in porttitor neque tristique pulvinar</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Ut commodo facilisis tellus, id egestas lorem pretium pellentesque.</li>
</ul>
<h2>Topic 2</h2>
<ul>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
</ul>
<h2>E-Commerce</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla leo odio, in porttitor neque tristique pulvinar</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
<li>Ut commodo facilisis tellus, id egestas lorem pretium pellentesque.</li>
</ul>
<h2>Health</h2>
<ul>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
</ul>
<h2>University and Building Technologies</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla leo odio, in porttitor neque tristique pulvinar</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Ut commodo facilisis tellus, id egestas lorem pretium pellentesque.</li>
</ul>
<h2>Industrial Software</h2>
<ul>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
</ul>
<h2>E-Commerce</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla leo odio, in porttitor neque tristique pulvinar</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
<li>Ut commodo facilisis tellus, id egestas lorem pretium pellentesque.</li>
</ul>
<h2>Health</h2>
<ul>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
</ul>
<h2>University and Building Technologies</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla leo odio, in porttitor neque tristique pulvinar</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Ut commodo facilisis tellus, id egestas lorem pretium pellentesque.</li>
</ul>
<h2>Industrial Software</h2>
<ul>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
</ul>
<h2>E-Commerce</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla leo odio, in porttitor neque tristique pulvinar</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
<li>Ut commodo facilisis tellus, id egestas lorem pretium pellentesque.</li>
</ul>
<h2>University and Building Technologies</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla leo odio, in porttitor neque tristique pulvinar</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Ut commodo facilisis tellus, id egestas lorem pretium pellentesque.</li>
</ul>
<h2>Industrial Software</h2>
<ul>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
</ul>
<h2>E-Commerce</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla leo odio, in porttitor neque tristique pulvinar</li>
<li>Integer ac purus consequat, bibendum tellus vitae, ullamcorper turpis. Etiam pellentesque, ligula vel semper fringilla, diam lacus mollis odio, a vulputate diam sem nec mauris</li>
<li>Curabitur sit amet dolor tortor. Cras gravida mi enim, ac pretium lacus pharetra non. Vestibulum non arcu enim</li>
<li>Ut commodo facilisis tellus, id egestas lorem pretium pellentesque.</li>
</ul>
<h2>Health</h2>
<ul>
<li>Nullam sed malesuada tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</li>
<li>Hey this is the last bullet here</li>
</ul>
</div>
</div>
<div id="entrybar" class="col-xs-12">
<div class="entryform">
<form class="form-inline">
<div class="form-group">
<label for="company">Company Name</label>
<input type="text" class="form-control" id="company" placeholder="CompanyX">
</div>
<div class="form-group">
<label for="name">Contact</label>
<input type="text" class="form-control" id="name" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-primary">Refer</button>
</form>
</div>
</div>
</div>
</div>
</body>
是否有自动设置margin虽然方式?我希望这能够在不同的断点处作出响应。使用上面的解决方案,如果我创建一个较大的底部边距以确保所有内容都显示在xs屏幕上,则会在较大的屏幕上留下大量空白区域。 –