0
Ich habe erschöpfend nach einer Lösung dafür gesucht, bin aber trocken aufgestanden.Wie bekomme ich einen Balken, der unten im Ansichtsfenster fixiert ist, um Fußzeile unten auf der Seite zu werden
Ich erstelle eine Seite, die viel Text enthalten wird, um durch ein Inline-Formular zu scrollen, das ich am unteren Rand des Ansichtsfensters immer fixieren möchte.
Wenn das Ende der Seite erreicht ist, möchte ich, dass diese Leiste die Fußzeile "wird" und unter dem letzten Bit Inhalt ruht.
Mein Problem: Wenn ich die Position dieses Formulars - wie hier gezeigt - fixiere, sitzt es auf dem letzten Teil meines Inhalts unten auf der Seite. Wenn ich das Attribut für die feste Position entferne, wird es nicht am unteren Rand des Ansichtsfensters angeheftet, während es sich oben in der Liste befindet. Ich begann mit einigen JQuery-Lösungen herumzuspielen, aber ich muss mir vorstellen, dass es eine einfachere/CSS-basierte Lösung gibt.
#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>
Gibt es eine Möglichkeit automatisch den Rand zu setzen? Ich möchte, dass dies an verschiedenen Haltepunkten reagiert. Wenn ich mit der obigen Lösung einen großen unteren Rand erzeuge, um sicherzustellen, dass alle Inhalte auf xs-Bildschirmen angezeigt werden, bleibt bei großen Bildschirmen viel Leerraum. –