Ich benutze Bootstrap-Cover-Vorlage Eine saubere Website mit wenigen Inhalten zu erstellen: im Wesentlichen Text und ein Bild.
Kopf- und Fußzeile überlagern den Website-Inhalt, wie Sie in diesem Screenshot sehen können:
Webseite: merdanacabeca.com/adrenalina/
Was ist die beste Lösung in diesem Fall? Medienanfrage?
Ich weiß, dass ich dem Inhalt einen oberen Rand hinzufügen kann <div> und ändern Sie die Position der Fußzeile in statisch statt in fest. Dies führt jedoch zu anderen Problemen bei verschiedenen Bildschirmauflösungen (beispielsweise kleiner).
Ich suche den besten Ansatz.
Antworten:
0 für die Antwort № 1Das Problem ergibt sich aus der festen Position der .masthead & .mastfoot-Klassen.
Entfernen Sie die feste Position von .mastfoot und Folgendes für .masthead und .cover:
.masthead {
position: fixed;
top: 0;
background: #333333;
}
.cover {
padding: 0 20px;
margin-top: 115px;
}
0 für die Antwort № 2
Wenn ich Ihre Frage richtig verstanden habe, versuchen Sie, die Fußzeile mit dem Text "Desenvolvido por ..." davon abzuhalten, diesen weißen Knopf zu überlagern (korrigieren Sie mich, wenn nicht).
Nun, es ist wegen der padding-bottom des .inner Klasse, dass der Text dort steht. Sie können das reduzieren ...
Ich glaube auch nicht, dass Sie brauchen position: fixed für die Fußzeile. Normalerweise bleibt es am unteren Rand der Seite.
Sie können auch zuweisen margin-top zum <div class="inner cover"> um das Problem mit dem Header verschwinden zu lassen