我已经详尽地搜索了一个解决方案，但已经干了。
我正在创建一个页面，其中包含大量文本以使用内联表单滚动，我希望始终将其固定在视口的底部。
当到达页面的末尾时，我希望这个栏成为＆＃34;成为＆＃34;在最后一点内容下面的页脚和休息。
我的问题：如果我修复了此表单的位置 - 如此处所示 - 它位于页面底部（并隐藏）我内容的最后一位。如果我删除其固定位置属性，则它不会固定在视口底部而位于列表顶部。我开始玩一些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="jane@company.com">
</div>
<button type="submit" class="btn btn-primary">Refer</button>
</form>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：0)
您可以使用容器液体将输入栏移动到同一水平，并在容器液体上设置边距底部。
#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;
}
.mar-bottom{
margin-bottom: 125px;
} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<body>
<div class="container-fluid mar-bottom">
<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>
</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="jane@company.com">
</div>
<button type="submit" class="btn btn-primary">Refer</button>
</form>
</div>
</div>
</body>
<!-- end snippet -->