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屏幕上，則會在較大的屏幕上留下大量空白區域。 –