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>
自動的にかかわらず、マージンを設定する方法はあり ？私は、これが異なるブレークポイントで応答するようにしたい。上記のソリューションを使用して、すべてのコンテンツがxsスクリーン上に表示されるように、大きなボトムマージンを作成すると、大きなスクリーンに多くの空白が残されます。 –