• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wiedereinmal Scrollbars...

B

broesel

Neues Mitglied
Hallo zusammen,

kann mir jemand erklären, wieso folgende HTML-Seite eine senkrechte Scrollbar zeigt?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DIV-Test</title>
<style type="text/css">
    html, body {
        height:100%;
        margin: 0px;
    }
    
    div {
        margin: 10px;
    }
</style>
</head>

<body>
    <div>
        test
    </div>
</body>
</html>
Ich kann das irgendwie nicht nachvollziehen. Es hängt an den 10px margin des DIV-Elementes, ohne diesen Rand verschwindet die Scrollbar. Aber wieso wird mit 10px rand eine Scrollbar angezeigt? Das DIV ist nur ein paar Pixel hoch...

Gruß
Brösel
 
Es liegt am margin-top des div-Elements.

Code: 
    html, body {
        height:100%;
        margin: 0px;
        background: #f00;
    }

    body {
        background: #0f0;
        }

    div {
        margin-top: 100px;
    }

Das hat -- wenn ich mich recht entsinne -- irgendwas damit zu tun, ob das umgebende Element (<body>) ein padding gesetzt hat und/oder ob es absolut positioniert ist. Habe es gerade nicht genau im Kopf.

Im Firefox würden diese beiden zusätzlichen Attribute helfen:

Code: 
body {
        position: absolute;
        width: 100%;
}

Edit: Willkommen im Forum!
 
Das nennt sich collapsing margins.
Der margin von div und body wird vereint. Damit ist body 100% + 10px hoch.
Vermeide margin-top im ersten Element nach body.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben