100% Breite Header füllt Browser nicht

Wenn das Browserfenster klein genug ist, um eine horizontale Bildlaufleiste zu erzwingen, und Sie nach rechts scrollen, endet die Hintergrundfarbe der Kopfzeile vor der Kante des Browsers. Ich benutze eine CSS-Klasse.100% Breite Header füllt Browser nicht

.s_header { 
    margin: 0; 
    width: 100%; 
    display: block; 
    border-bottom: 1px solid #000; 
    background-color:#b8dbec; 
    height:133px; 
}

Der Inhalt <div class="s_header"> sind nicht so breit wie der Tisch 4 Säulen darunter, wo der Inhalt Summen abot 840px mit Bildbreiten + Polsterung und eine feste Breite 140px Spalte. Wenn das Browserfenster weniger als 840 Pixel groß ist, gibt es eine horizontale Bildlaufleiste, die in Ordnung ist, außer dass der Hintergrund der Kopfzeile beim Scrollen abgeschnitten wird.

Die Elternelemente von <div class="s_header"> sind Körper und HTML, für die 100% Breite die Fensterbreite bedeutet. Ich habe versucht, einschließlich Überlauf: sichtbar in .s_header Klasse ohne Erfolg.

Die Körperbreite zu 100% Marge wird auch 0

Gibt es eine einfache Art und Weise, habe ich den Hintergrund auf der rechten Seite, wenn eine Bildlaufleiste angezeigt zu erweitern bekommen kann?

Das Problem Seite ist im here

wird Irgendwelche Vorschläge sehr geschätzt.

Quelle

2009-07-22 Anonymous

Ich schlage vor, von ganzem Herzen, dass Sie firefox benutzen und installieren Firebug: http://getfirebug.com/

Es hat dieses coole Feature, das Sie kontrollieren ein DOM-Element lässt, und es wird Ihnen alle Arten sagen, und welche Sheet sie stammen. Also, wenn der Körper etwas verirrten Polsterung (oder etwas) zu erben, können Sie visuell sehen, was los ist :-)

Quelle

2009-07-22 17:51:14

helfen könnte Dies bietet keine Antwort zur Frage. Um einen Autor zu kritisieren oder um Klärung zu bitten, hinterlasse einen Kommentar unter seinem Beitrag. – kolossus

Danke für das Feedback zu einer fast 6 Jahre alten Antwort ... bevor Kritik/Klärung eine gut etablierte Gemeinschaftspraxis war;) –

Gern geschehen; Als vertrauenswürdiger Nutzer hoffe ich, dass Sie verstehen, wie das zustande kam. Die Überprüfungswarteschlange bedient es und wir arbeiten es aus – kolossus

stellen Sie die Ränder des Körpers Tag

Die in-line Weg

<body style="margin: 0px 0px 0px 0px;">

In Ihrem style.css (oder was auch immer)

body { 
    margin: 0px 0px 0px 0px; 
}

Quelle

2009-07-22 17:52:35

+1 kurzer Modus und Auffüllen: body {margin: 0; padding: 0} – gmunkhbaatarmn

Ich habe Körper {margin: 0; Padding: 0}, aber es hat nicht geholfen. Der Header ist viel kleiner als der Inhalt ... – DashaLuna

einfache Art und Weise ist eine innere div und setzen sie sich auf die gleiche Breite zu erstellen, wie die Seite kurz vor dem Scrollbar Beispiel erscheint geht

<div class="s_header"> <div class="inner"> 

</div> </div> 

.inner{ 
    width:990px; 
    background:#f00; 
    margin:0 auto; 
}

Quelle

2009-07-23 10:50:26

Kaum eine gute Idee, die Breite eines Div auf eine fest codierte Zahl zu setzen. –

Es sieht so aus, als wäre das Problem auf die drei Bilder in der Body-Tabelle zurückzuführen. Wenn Sie die Browserbreite reduzieren, werden die drei Bilder so zusammengeballt, dass sie sich in einzelnen Tabellenzellen befinden, die nicht umgebrochen werden können, was zu einer festen Breite führt.

Sie könnten versuchen, die Lösung zu täuschen, indem Sie ein sich wiederholendes Hintergrundbild für den Header verwenden, aber ich würde die Tabellenstruktur mit einem Floating-Ansatz neu schreiben.

Quelle

2009-07-23 10:59:34

My [sehr einfach] [und wahrscheinlich hässlich] Lösung:

stellen Sie Ihren Body-Tag min-width-Eigenschaft auf 100%;
definieren eine Klasse minWidth 100% Breite Eigenschaft und eine min-width Eigenschaft basiert auf der folgenden Berechnung zu definieren:
- gesetzt zu haben Ihre Schriftart-Größe bis zu 100% sicher, dessen Übersetzung in Pixeln in einem Browser;
- divide die heutzutage 17" Monitore Standardauflösung 1440px Breite mit diesem Pixel 1EM Schriftgröße Ergebnis;
- setzte die min-width Eigenschaft in em zu diesem Ergebnis ausgedrückt;
- zB für Font-family: ' Gill Sans MT‘, sans-serif; 100% Größe führt zu einer 16px Schrift;
  1440/16 = 90
  CSS muss dann wie folgt aussehen:
  html {whatever} body {min-width: 100%;} .minwidth {min-width:90em;width:100%;}

Schließlich 3. wenden Sie die .minwidth Klasse auf alle Körper ältere Kinder müssen 100% Körpergröße breit sein.

schalen Ihr Browserfenster und/oder die Auflösung ändern, sollten Sie bis zu 1440 * 900

dieses lästigen Problem für alle Bildschirmauflösungen haben loszuwerden

Hoffnung I

Quelle

2012-03-28 16:14:32

Antwort

Verwandte Themen