100% div höhe

A

aiquita

Mitglied
Ich weiss das schon öfters in allen möglichen Foren Thema war
allerdings hab ich die verschiedensten tipps ausprobiert die ich gefunden hab und es hat einfach nichts funktioniert
deswegen wend ich mich jetzt direkt an euch

ich möchte die divs contentbgl, contentbg und contentbgr auf die volle seiten höhe haben auch wenn sie nicht komplett gefüllt sind

hier die quellcodes

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Paradiseball</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>

<body>
    <div id="contentbgl"></div>
    <div id="contentbg">
        <div id="header">

        </div>

        <div id="nav">

        </div>

        <div id="main">

        </div>

        <div id="footer">

        </div>
    </div>
    <div id="contentbgr"></div>
</body>
</html>

Code: 
body {
    margin:0 auto;
    width:1000px;
    background:black;
}

#contentbgl {
    float:left;
    margin:0px;
    padding:0px;
    background:url(contentbgl.png);
    width:50px;
    height:200px;
}

#contentbg {
    float:left;
    margin:0px;
    padding:0px;
    background:url(contentbg.png);
    width:900px;
    height:200px;

}

#contentbgr {
    float:left;
    margin:0px;
    padding:0px;
    background:url(contentbgr.png);
    width:50px;
    height:200px;
}

#header {

}

#nav {

}

#main {

}

#footer {

}

vielen dank schonmal für eure antworten

mfg
aiquita
 
Zuletzt bearbeitet:
Hi,

warum nimmst Du nicht:

Code: 
height: 100%;

Ist das richtig, dass Du bei all den genannten Containern (contentbgl, contentbg und contentbgr) keine position:, top: und left: Angaben machst?

Ausserdem verstehe ich nicht warum Du dem Body eine Breite von 1000px zuordnest? Welchen Sinn hat das? :confused:


Beste Grüße!
 
der body hat 1000px weil sonst die zentrierung des bodys mit margin:auto; nicht funktioniert
wofür sollt ich diese positionsangaben machen sind ja nicht notwendig
ne einfach 100% funktioniert nicht

trotzdem danke für die antwort
 
Hallo,

du hast vergessen das HTML-Element im CSS zu berücksichtigen. In den CSS-FAQ bibt es einen entsprechenden Beitrag: Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt?
So müsste es funktionieren:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <title>Paradiseball</title>
</head>

<body>
  <div id="contentbgl"></div>
  <div id="contentbg"></div>
  <div id="contentbgr"></div>
</body>

</html>
CSS: 
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  width: 1000px;
  margin: 0 auto;
  background: black;
}
#contentbgl, #contentbg, #contentbgr {
  float: left;
  width: 50px;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #ffc;
}
#contentbg {
  width: 900px;
  background: #fcf;
}
#contentbgr {
  background: #ccf;
}
 
Thx du hast mich gerettet
des eigenartige ist nur obwohl ich ewig geuscht habe hat niemand das als möglichkeit angboten

auf jeden fall funktionierts klasse danke nomal

Mfg
Marvin
 
Nur so aus interesse. Zeig doch mal deine Hintergrundbilder. Wenn alle gekachelt werden sollen, dann könntest du dir die vielen LEEREN Conteiner sparen. Und du kannst Faux Column anwenden.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück