Wie kann ich den Leerraum am unteren Rand meiner Webseiten entfernen?

Question

Ich versuche, eine Website mit Wordpress zu erstellen. Ich habe ein Thema erstellt und die meisten meiner Seiten wurden mit Seitenvorlagen erstellt, weil ich mich vom Blog-Look fernhalten wollte.

Alles sah gut aus, bis ich die Seite auf meinem iPad im Hochformat sah. Ich habe einen riesigen weißen Platz am Ende jeder Seite. Ich habe das Entwicklertool von Chrome Canary verwendet, konnte aber nicht das Element finden, das den Whit-Space verursacht.

Ich habe seit Tagen Foren gesucht und Lösungen versucht, die anderen mit dem Problem geholfen haben. Bisher kein Glück.

Ich habe versucht, Medien-Anfragen wie mit:

@media only screen and (min-width: 768px) and (max-device-width: 1024px) and  (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1) { 

Html,body{ 
    Overflow:hidden; 
} 

Noch haben die großen weißen Bereich am Ende jeder Seite, wenn ich im Portrait-Modus auf meinem iPad.

Bitte helfen Sie mir die Lösung für dieses Problem zu finden. Hier ist ein Link zu meiner Website: http://www.davidsdrift.com/

Vielen Dank für jede Hilfe.

Answer 1

füllen möchten Entfernen Sie die zwei background-size Eigenschaften von body und fügen background-size: cover; hinzu.

diesen Selektor hinzufügen

html { 
    min-height: 100%; 
} 

jetzt Ihr Hintergrund den gesamten Bildschirm unabhängig von der Auflösung abdecken sollte. Vielleicht möchten Sie auch background-position: center center; hinzufügen.

Beispiel

html { 
    min-height: 100% 
} 
body { 
    background: url(images/homePage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
} 

Answer 2

Wenn Ihr Website-Design eine statische Höhe hat, dann wird jeder Browser, der höher als diese Höhe ist (die meisten mobilen Browser, da sie im Hochformat sind) an diesem Punkt anhalten und nichts anderes darunter setzen. Der Browser nimmt danach nur noch "nichts" (d. H. Leerraum) vor.

Sie können eine einfache Hintergrundfarbe festlegen, so dass sie nicht nur unter Ihrem entworfenen Bereich auf Weiß gesetzt wird (body {background-color: #CCCCCC;}), oder etwas schicker als das versuchen.

Oder, (Schluck) Sie könnten die Seite völlig neu justieren, um kein statisches rechteckiges Design zu verwenden.

Answer 3

Es hängt davon ab, ob Sie Bild setzen wollen 100% Ihre Höhe zu füllen nur

background-size: 100% 100%;

Else hinzufügen, wenn Sie Inhalt Prozentsatz nicht Pixel für volle Höhe

Answer 4

Joes Antwort hinzu: Der Grund, warum Sie weißen Raum auf dem ipad im Portrait-Modus sehen, ist wegen der Seitenverhältnis und Orientierung des Hintergrundbildes.

Es gibt unzählige Korrekturen für diese, aber sie alle hängen davon ab, was Sie mit diesem zusätzlichen Leerraum tun möchten. Sie könnten Ihren Hintergrund vergrößern, um den gesamten Bereich abzudecken, den Hintergrund wiederholen, CSS3-Eigenschaften verwenden, um einen Spiegeleffekt zu erzeugen, usw.

Angenommen, Sie nur der Hintergrund wollen, dass diese den ganzen Raum zu nehmen, wenn im Portrait-Modus verwenden:

@media (orientation:portrait){ 
    html{ min-height:100% } 
    body { 
    background:url(images/homePage.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center center 
    } 
}