wake-up-neo.com

100% DIV Breite ist nicht wirklich 100%

Wenn ich einen <div> mit width: 100% habe, ist es nicht wirklich 100%:

<div id="div">testtesttesttesttest</div>

...

#div {
  width: 100%;
  background-color: red;
}

Wenn Sie jetzt die Fenstergröße ändern, also eine horizontale Bildlaufleiste angezeigt wird und Sie nach rechts scrollen, ist der Hintergrund verschwunden. Wie kann ich in diesem Fall Hintergrund bleiben?

Hier sehen Sie das Problem in Aktion: http://beta.ovoweb.net/?i=3

Wenn Sie nun die Fenstergröße ändern und nach rechts scrollen, können Sie den Hintergrund nicht mehr sehen. Wie kann ich das beheben?

22

Der 100% -Wert entspricht 100% der Breite des übergeordneten Elements oder des Ansichtsports. Siehe die Dokumentation .

19
James Sumners

Breite: 100%, wird stark durch den Rand und den Rand sowie die Polsterung des übergeordneten Elements (in Ihrem Fall Körper) beeinflusst. SO, setzen Sie sie zuerst zurück

So etwas wie

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

DEMO

17
Starx

füge dies zu css hinzu:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

Dann sollte es klappen.

5
Arda

100% ist nur 100% der verfügbaren Breite, basierend auf dem übergeordneten Container. Wenn Sie also ein DIV mit einer Breite von 500 Pixeln erstellen und dann ein weiteres DIV mit einer Breite von 100% verschachteln, kann Ihr 100% DIV auf maximal 500 Pixel erweitert werden (ohne Auffüllung oder Rand zu zählen, sodass Sie sie auf 0 zurücksetzen müssen).

2
Dan

Dies sollten Sie tun (fügen Sie diese Zeile ganz oben in Ihre CSS-Datei ein):

* { margin: 0; padding: 0; }

Funktioniert die ganze Zeit für mich.

2
shane

meistens füge ich dieses bisschen Code meiner CSS hinzu. Es sollte auch für Sie funktionieren. Ja, 100% Breite oder Höhe bezieht sich immer auf den übergeordneten Container.

CSS

*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}


#container{
width:100%;
height:100%;
background:gray;
position:relative;
display:block;
}
#content{
height:50px;
width:50px;
bottom:20px;
right:10%;
background:red;
position:absolute;
}

HTML

<div id="container">
    <div id="content">
    </div>
</div>​

AUSGABE

enter image description here

1
GaurabDahal

In meinem Fall nahm das div-Tag nicht 100% seines übergeordneten Tags in Anspruch, da das div eine Inline-Anzeige hatte. Das Ändern in "Inline-Block" hat dieses Problem behoben.

0
James in Indy