Ja, kann man. Wie das genau funktioniert, hängt aber vom Layout ab. Welches Layout verwenden Sie denn? Und für mich zum Verständnis: Was möchten SIe mir dem fixierten Weiter-Knopf erreichen?
Vorab sollten Sie sich noch ein paar Gedanken zur Usability machen. Ich hatte für ein anderes Projekt einmal ein Layout mit fixierten Buttons erstellt - aber die Kollegen haben sich am Ende doch für das "normale" Layout entschieden, weil es bei längerne Seiten sonst schnell passiert, dass man die "unteren" Fragen übersieht. Es kann ja durchaus passieren, dass die erste Frage den Raum über den Knöpfen "gerade so" ausfüllt und dass man (v.a. wenn auf einem Mac-System oder auf einem Tablet der Scrollbalken ausgeblendet ist) nicht sieht, dass dort noch weitere Inhalte auf der Seite folgen.
Ergänzung
Hier ist der HTML-Code für das Standard-Layout mit der entsprechenden Modifikation. Relevant ist der Teil hinter %questionnaire%
. Und zwar wurde der Platzhalter %submit.buttons%
ergänzt und ein Teil des Inhalts (eben die Knöpfe, der Kontrollelemente und das Impressum) in ein <div>
mit der Positonsangabe fixed
gepackt. Dadurch stehten diese Teile immer am unteren Ende des Bildschirms. Vorsicht also auch bei großen Bildschirmen.
<!DOCTYPE html>
<html>
<head>
%head%
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body { padding: 0 0 20px 0; margin: 0 }
div#s2t-progress { position: absolute; right: 10px; top: 0px; width: 200px }
div#s2t-logo { margin-bottom: 10px }
div.questionary { min-width: 320px; max-width: %width%; margin: 14px auto 0px auto; padding: 0 10px }
/* Center header and footer on smartphone */
@media (max-width: 450px) {
div#s2t-logo { text-align: center; margin-bottom: 16px }
div#s2t-controls { text-align: center }
div#s2t-imprint { text-align: center }
div#s2t-progress { left: 0; right: 0; margin: 0 auto }
}
</style>
</head>
<body>
<div class="questionary" style="position: relative">
%form.open%
<div id="s2t-logo">%logo%</div>
<div style="position: relative">
<div style="padding-top: 2px; margin: 0px 0px 24px 0px; height: 10px; width: 100%; border-bottom: 2px solid %color.4%; overflow: hidden"></div>
<div id="s2t-progress" style="background-color: #FFFFFF">%progress%<span><!-- empty span required for IE --></span></div>
</div>
<div id="s2t-content">
<div style="margin-bottom: 32px;"></div>
%questionnaire%
</div>
<div style="position: fixed; bottom: 0px; width: 100%; min-width: 320px; max-width: %width%; background-color: white; padding: 20px 0;">
%button.submit%
<hr style="margin-bottom: 14px;">
<div id="s2t-controls">
%button.control%
</div>
<div id="s2t-imprint">
%imprint%
</div>
</div>
%form.close%
</div>
</body>
</html>