✔ DIV vertikal zentrieren ohne feste Größe

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Moin Moin,

wie bekomme ich einen DIV-Container (welcher andere DIVs enthält) vertikal zentriert?
Also so, dass oben und unten einfach der Hintergrund zu sehen ist?

Bisher habe ich immer nur Beispiele gesehen, die sich an Pixelwerten orientiert haben. Ich mag aber gerne eine Lösung erarbeiten, die sich am verfügbaren Platz des Viewports orientiert.

Bisher dachte ich, dass ich mit folgendem Code richtig liege:
Code: 
body
{
  height:100%;
}

#wrap
{
  margin-top:10%;
  margin-bottom:10%;
}

#top
{
  height:10%;
  background-color:#3366CC;
}

#menu
{
  background-color:#996600;
}

#content
{
  height:55%;
  background-color:#996633;
}

#bottom
{
  height:10%;
  background-color:#3366CC;
}

Leider weit gefehlt :-(


EDIT: bei margin:10%; hab ich eine Scrolleiste nach unten. Bei je 5% nicht. Hab ich da nen Rechenfehler drin?
 
Zuletzt bearbeitet:
Moin Maik,

klappt im FF wunderbar. Im IE7 versagt dieses Beispiel bei mir jedoch :-(

Code: 
body,html
{
  height:100%;
  font-family:arial;
  font-size:12px;
}

#wrap
{
  height:100%;
  width:100%;
  display:table;
  vertical-align:middle;
}

#outer{
  display:table-cell;
  vertical-align:middle;
}

#top
{
  height:10%;
  background-color:#3366CC;
}

#menu
{
  height:auto;
  background-color:#996600;
}

#content
{
  height:55%;
  background-color:#996633;
}

#bottom
{
  height:10%;
  background-color:#3366CC;
}

h2
{
  font-size:14px;
  font-weight:bold;
}

.text
{
  font-size:12px;
  font-weight:normal;
}

HTML: 
<body>
  <div id="wrap"><div id="outer">
    <div id="top">
    TOP
    </div>    
    <div id="menu">
<!--
      <a href="index.php?n=" title=""></a>
-->      
      <a href="index.php?n=start" title="Startseite">Startseite</a>
      <a href="index.php?n=wohnunga" title="Wohnung 1">Wohnung 1</a>
      <a href="index.php?n=wohnungb" title="Wohnung 2">Wohnung 2</a>      
      <a href="index.php?n=bilder" title="Bilder">Bilder</a>      
      
    </div>
    <div id="content">
    CONTENT
    </div>
    <div id="bottom">
    BOTTOM
    </div>
  </div></div>
  </body>

Ein Hinweis?
 
Dann dürftest du das hier aus dem Beispiel vergessen haben, denn der IE (auch in der aktuellen 7er-Version) interpretiert bislang noch immer nicht die Tabellenwerte der display-Eigenschaft:

Code: 
<!--[if gte IE 5]>
<style type="text/css">
#wrapper{	overflow:hidden;/* stop hoz scroll bar from appearing*/}
#formwrap {top:50%}
#form1{top:-50%;}
</style>
<![endif]-->
mfg Maik
 
Stop, Halt!

Er overflowed nicht, sondern ignoriert die Höhe der DIVs gänzlich. Ich habe quasi 4 sichtbare DIVs, die
a) direkt am Seitenanfang losgehen
b) jeweils nur die Höhe des Textes haben
 
Nein, ich gestehe, dass ich resigniere und auf feste Größen zurückgreife.

Ich danke Dir dennoch für die Hilfe und Mühe!
 
Bevor du dich vom IE so schnell entmutigen lässt, ist dir da noch nicht in den Sinn gekommen, einfach mal dein "Konstrukt" in der Vorlage einzusetzen?

Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{height:100%}
#wrapper{
        height:100%;
        width:100%;
        display:table;
        vertical-align:middle;
}
#outer{
        display:table-cell;
        vertical-align:middle;
}
#formwrap{
        position:relative;
        left:50%;
        float:left;
}
#innerwrapper{
        border:1px solid #000;
        padding:20px 20px;
        position:relative;
        text-align:right;
        left:-50%;
}

#top
{
  height:10%;
  background-color:#3366CC;
}

#menu
{
  height:auto;
  background-color:#996600;
}

#content
{
  height:55%;
  background-color:#996633;
}

#bottom
{
  height:10%;
  background-color:#3366CC;
}

h2
{
  font-size:14px;
  font-weight:bold;
}

.text
{
  font-size:12px;
  font-weight:normal;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
#wrapper{        overflow:hidden;/* stop hoz scroll bar from appearing*/}
#formwrap {top:50%}
#innerwrapper{top:-50%;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
     <div id="outer">
          <div id="formwrap">
               <div id="innerwrapper">
                    <div id="top">
                         TOP
                    </div>
                    <div id="menu">
                         <!--
                         <a href="index.php?n=" title=""></a>
                         -->
                         <a href="index.php?n=start" title="Startseite">Startseite</a>
                         <a href="index.php?n=wohnunga" title="Wohnung 1">Wohnung 1</a>
                         <a href="index.php?n=wohnungb" title="Wohnung 2">Wohnung 2</a>
                         <a href="index.php?n=bilder" title="Bilder">Bilder</a>

                    </div>
                    <div id="content">
                         CONTENT
                    </div>
                    <div id="bottom">
                         BOTTOM
                    </div>
               </div>
          </div>
     </div>
</div>

</body>
</html>
mfg Maik
 
In den Sinn gekommen schon, aber ich bin den Kampf gegen diese MS-Maschinerie echt leid. Immer extra Würste für die Redmonder. Nee, is nicht :mad:

Verzeih mir meinen kleinen Ausbruch und hab Dank, dass Du mir die Lösung dennoch näherbringst :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück