Meine Bildlaufleiste geht nicht auf der rechten Seite des Browsers?

Ich bin ziemlich neu in CSS/HTML. Für ein Projekt der Schule musste ich eine nicht reaktionsfähige 1140px Website erstellen. Ich entschied, dass der 1140px eine weiße Hintergrundfarbe (in der Mitte des Browsers) haben sollte, auf beiden Seiten wollte ich, dass er eine dunkelgraue Farbe hat.Meine Bildlaufleiste geht nicht auf der rechten Seite des Browsers?

Also habe ich eine dunkle graue Farbe zu meinem HTML und eine weiße Farbe zu meinem Körper mit einer Breite von 1140px. Ich musste einen "overflow: hidden" auf den html setzen oder sonst die weiße Hintergrundfarbe des Körpers nicht anzeigen. Aber das Problem ist, dass meine Bildlaufleiste wegen dieses versteckten Überlaufs nicht auf der rechten Seite meines Browsers ist, sondern stattdessen auf der rechten Seite meines Körpers.

Screenshot von meinem Problem:

http://i68.tinypic.com/hvxjdj.png

html { 
    background-color: rgb(50,50,50); 
    overflow: hidden; 
} 

body { 
    line-height: 1; 
    width: 1140px; 
    margin: 0 auto; 
    background-color: white; 
    overflow: auto; 
    box-shadow:0px 0px 20px #000000; 
}

Gibt es eine Möglichkeit, meine Scrollbar nach rechts zu bewegen und den Überlauf versteckte Eigenschaft ignorieren? Oder eine andere Möglichkeit, denselben Hintergrund zu erhalten?

Quelle

2016-03-26 Sarah Van Den Berghe

kann Ihnen helfen, einen Ausschnitt oder einen jsfiddle oder etwas zu machen, der das Problem demonstriert? Es muss noch etwas anderes passieren als das, was du uns hier erzählst, denn wenn ich [eine Geige] (https://jsfiddle.net/MrLister/8m6w3876/1/) mit deinen Informationen mache, zeigt es einfach die Bildlaufleiste an der rechte Rand des Fensters. –

Sie sollten im Allgemeinen versuchen zu vermeiden, das HTML-Tag zu viel Styling. In vielen Fällen wird das HTML-Tag von Browsern nicht als separates Blockelement erkannt. Hier müssen Sie eindeutig die Überlauf-Deklaration für das HTML-Tag entfernen und eine bessere Möglichkeit finden, das zu konfigurieren, was Sie wollen ... nur den Body, dann ein Div für Ihren Inhalt. – Scott

In der Tat haben Sie Recht Herr Lister, da war etwas anderes das Problem, so sah ich durch ganz meine CSS dort war dieser Code: html, Körper { min-Höhe: 100%; Höhe: 100%; } Ich löschte das und es hat gut funktioniert. Mir ist nicht aufgefallen, dass etwas anderes das Problem sein könnte, danke! In der Zukunft werde ich es anders versuchen, neu, aber ich werde mich an jeden erinnern, danke auch Scott! –

Entfernen Sie die overflow:hidden auf Ihrem HTML und machen Sie Ihre Körperbreite 100% und dann machen Sie ihre Hintergrundfarbe transparent. Dadurch erhalten Sie eine vollständige dunkelgraue Seite (da die HTMl bereits grey bckground hat). Fügen Sie nun ein div in den Körper ein und setzen Sie seine Hintergrundfarbe auf weiß. Stellen Sie auch Ihr div in die Mitte, indem Sie einen Rand links und einen Rand rechts geben. Setzen Sie Ihren gesamten Inhalt in dieses div. Das ist es, jetzt haben Sie die Bildlaufleiste ganz rechts im Browser. Hier ist ein Ausschnitt, die Sie vielleicht

html{ 
 
    background-color:grey; 
 
} 
 

 
body{ 
 
    width:100%; 
 
    height:auto; 
 
    background-color:transparent; 
 
} 
 

 
.appContainer{ 
 
    margin: 0px 40px 0px 40px; 
 
    background-color:white; 
 
    height:2000px; 
 
}

<body> 
 
<div class="appContainer"> 
 
    
 
</div> 
 
</body>

Quelle

2016-03-26 19:04:38

Oh danke! Ich werde es beim nächsten Mal so machen, ich wusste nicht, wie ich es richtig machen soll :) –

@SarahVanDenBerghe Wenn diese Lösung Ihnen geholfen hat, Ihr Problem zu lösen, dann markieren Sie es bitte als Antwort, da es für zukünftige Zuhörer nützlich sein könnte –

Meine Bildlaufleiste geht nicht auf der rechten Seite des Browsers?

Antwort

Verwandte Themen