Ich habe eine Website, bei der die Breite der Kopfleistenleiste 100% beträgt. Wenn sie jedoch links neben dem Bildschirm angezeigt wird, wird sie beim Scrollen abgeschnitten.
Hier ist ein Beispiel:
Wenn es sich jedoch um ein kleineres Fenster handelt und es einen Bildlauf durchführt:
Wie kann ich die Breite auf 100% bringen, wenn der Bildschirm wie auf dem Bild halbiert ist?
Entschuldigung für die schlechte Erklärung, ich weiß nicht, wie ich es gut erklären soll. Hoffentlich helfen die Bilder.
Mein CSS ist:
Header{background-color: #58dede; width: 100%;}
Antworten:
1 für die Antwort № 1Es ist zwar schwierig, sich Ihr Problem vorzustellen, aber Sie können diesen Code ausprobieren -
CSS:
Header{background-color: #58dede; /*width: 100%;*/ float:none !important; }
.clear {clear:both;}
HTML:
<header>
your content
<div class="clear"></div>
</header>
0 für die Antwort № 2
Geben Sie in Ihrem Body-Tag die minimale Dokumentbreite für Ihre Seite an. Zum Beispiel:
body{min-width:1000px;}
0 für die Antwort № 3
Sie haben die Breite Ihrer Kopfzeile auf 100% und gesetztNachdem Sie die Breite Ihres Browsers verkleinert haben, wird die Breite der Kopfzeile auf 100% der Breite des Ansichtsfensters reduziert, anstatt dieselbe Breite wie der Inhalt von HTML und / oder Header zu haben. Wenn Sie also eine horizontale Bildlaufleiste sehen und dann nach rechts scrollen, gilt die Hintergrundfarbe nicht mehr für die gesamte gewünschte Breite der Kopfzeile, da Ihre Kopfzeile nicht mehr so breit ist.
Dies kann leicht durch Einstellen des korrigiert werden
min-width: property
auf die Breite aller kombinierten Ränder +Elementbreiten (unter der Annahme, dass die Größe des Rahmens festgelegt wurde: Rahmen-Rahmen wurde festgelegt, also einschließlich Auffüllung und Rand in Ihrer Breite). Wenn Sie in Ihren Rändern oder für untergeordnete Divs Ihrer Kopfzeile Prozentsätze verwendet haben, schließen Sie diese nur in eine calc () - Funktion für den Eigenschaftswert min-width ein.
min-width: calc(2% + 200px + ...); etc