XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   100% Höhe von Divs klappt einfach nicht. (http://xhtmlforum.de/showthread.php?t=62485)

icecold 24.09.2010 00:12

100% Höhe von Divs klappt einfach nicht.
 
Hallo,
ich versuche jetzt schon seit vielen Stunden ein Layout zu erstellen.
Habe auch fast alles so hinbekommen wie ich es will außer die Höhe der divs in der Mitte der Seite.
Zur Erklärung:
Oben ein header (feste höhe und 100% breite),
darunter links ein menü (feste breite), mitte der inhalt (variabele breite) und rechts eine weiteres Fenster (feste breite),
und unten ein footer. (feste höhe und 100% breite).

Der Header passt. Der footer passt. Aber ich bekomme es einfach nicht hin das alles in der Mitte die restliche Seite ausfüllt. In Der Breite klappt das. Aber nicht in der Höhe.

Bitte helft mir!
Hier der Code der Seite:

PHP-Code:

<!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=utf-8" />
<link href="all2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="outer_wrapper">
<div id="wrapper">

<div id="header">
<?php include 'header.php' ?>
</div><!-- /header -->

<div id="container">

<div id="left">
<?php include 'menue.php' ?>
</div><!-- /left -->

<div id="main">
<?php
if($_GET['ac']=='Startseite' || !$_GET['ac'])include 'Startseite.php';
if(
$_GET['ac']=='Wir')include 'Wir.php';
if(
$_GET['ac']=='Kontakt')include 'Kontakt.php';
if(
$_GET['ac']=='Impressum')include 'Impressum.php';
?>
</div><!-- /main -->

<!-- This is for NN6 -->
<div class="clearing">&nbsp;</div>
</div><!-- /container -->

<div id="sidebar">
<?php include 'sidebar.php' ?>
</div><!-- /sidebar -->
<!-- This is for NN4 -->
<div class="clearing">&nbsp;</div>

<div id="footer">
<?php include 'footer.php' ?>
</div><!-- /footer -->

</div><!-- /wrapper -->
</div><!-- /outer_wrapper -->

</body>
</html>

und hier das css:
HTML-Code:

html, body {
height: 100%; /* wichtig */
margin:0px;
padding:0px;
background-color:#FFC;
}

#outer_wrapper {
min-width:740px;
width:100%;
}

#wrapper {

}

#header {
border:1px;
width:100%;
/* the above declaration creates an horizontal scroll bar in IE, this is to get rid of it */
margin:0 -1px;
height:150px;
}

#container {
float:left;
width:100%;
display:inline;
margin-left:-200px;

}

#left {
float:left;
width:150px;
display:inline;
margin-left:200px;
}

#main {
/* the width from #left (150px) + the negative margin from #container (200px) */
margin-left:350px;
background-color:#FFF;
}
/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebar {
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left:100%;
/* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left:-200px;
}

#sidebar p {
    text-align:center;
}

#footer {
position: absolute;
/* see #outer_wrapper  */
width:100%;
/* this is to clear #container */
clear:both;
border-top:1px;
border-bottom:1px;
bottom: 0; /* wichtig */
}
/* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}


icecold 24.09.2010 00:26

Ach so ich habe die Hälfte vergessen...
Das Css habe ich natürlich bereinigt von meinen versuchen.
Ich habe es probiert mit:
HTML-Code:

min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
position: relative;

Ich glaub mittlerweile an jeder position der css.

Wenn jemand eine besser Idee für ein solches Layout hat würde mich das natürlich auch brennend interessieren.

fricca 24.09.2010 00:29

Was soll denn passieren, wenn der Inhalt mehr Platz braucht als 100%?

Dein PHP ist übrigens nutzlos hier. Poste bitte einen Link, siehe auch die Hinweise für Fragende.

icecold 24.09.2010 00:39

Danke für die rasche Antwort.
Es soll sich alles am div main "ausrichten" wenn es zu groß ist.
Sprich: Immer soll der mittelteil eine höhe von 100% haben.
Und wenn zuviel inhalt im div main ist dann soll alles angezeigt werden und der "rest" also der footer nach unten wandern.
- Ich hoffe das versteht jemand, weiß garnicht wie ich das beschreiben soll. -

Welchen Link soll ich senden? Zur Seite? Die ist noch nicht online.
Das include kann man auch gerne durch text ersetzen, muss ja trotzdem gehen...
Mehr php ist noch nicht ind der Seite.
Ich kann gerne die Dateien per PN, icq oder so zuschicken wenn das hilft...
Und noch was: Es klappt bei keinem Browser. Habe die jeweils aktuelle Version (ohne Beta) von den meistgenutzen 5 browsern.

fricca 24.09.2010 00:43

Zitat:

Zitat von icecold (Beitrag 475799)
Danke für die rasche Antwort.
Es soll sich alles am div main "ausrichten" wenn es zu groß ist.
Sprich: Immer soll der mittelteil eine höhe von 100% haben.
Und wenn zuviel inhalt im div main ist dann soll alles angezeigt werden und der "rest" also der footer nach unten wandern.

Du beschreibst "Footer Stick Alt", siehe FAQ Punkt 7.
Gleich hohe Spalten: FAQ Punkt 1.

Zitat:

Welchen Link soll ich senden? Zur Seite? Die ist noch nicht online.
Dann ist es jetzt Zeit, das zu ändern.
Niemand hat Zeit für Bausätze. Und bei dir kommt noch nichtmal etwas brauchbares raus, wenn man sich die Mühe machen würde. Nochmal: Serverseitiger Code ist hier nutzlos!
Zitat:

Ich kann gerne die Dateien per PN, icq oder so zuschicken wenn das hilft...
Kostenlosen Privatsupport? Nein, ganz bestimmt nicht.

emti 24.09.2010 00:46

Fusszeile immer am unteren Rand / "Footer Stick Alt"

Edit: Zu langsam.

icecold 24.09.2010 00:51

Jetzt online: entfernt!
Das Menü ist ohne funktion...

heiko_rs 24.09.2010 00:58

Du hast bereits die richtigen Tipps bekommen: FAQ 1 und 7.

icecold 24.09.2010 01:43

Zitat:

Du hast bereits die richtigen Tipps bekommen: FAQ 1 und 7.
Mags sein aber leider kann ich diesen Tip nicht umsetzen weil ich es nicht verstehe.
Wenn damit die Sache mit dem Hindergrundbild gemeint ist, dann glaube ich nicht wirklich dass das was wert ist. Ich hätte schon gerne erreicht das es auf jeden monitor so aussieht wie ich es will. Also 200px links, mitte die restliche breite, und rechts 200px. egal ob es auf einem 15 Zoll netbook meiner freundin ist oder auf meinem 30 zoller. und bei einem hintergrundbild geht das eher nicht. oder?
[FAQ]Du beschreibst "Footer Stick Alt", siehe FAQ Punkt 7.[/FAQ]
richtig. mein footer ist auch dort wo er hin soll aber die höhe der boxen darüber ist nicht korrekt.

P.S. Ich wollte hilfe uund lernen. Aber rumraten hilft da nicht weiter.
Falls jemand einen lösungsweg hat und mir sagen kann was ich falsch gemacht habe kann er gerne schreiben.
Aber es nützt nichts wenn jemand einen link zu einem link zu einem link postet. So wird das weder für mich noch für nachfolgende user erfolgreich.

heiko_rs 24.09.2010 01:49

Zitat:

Zitat von icecold (Beitrag 475805)
Aber es nützt nichts wenn jemand einen link zu einem link zu einem link postet.

Doch, denn dort ist genau erklärt, was zu tun ist. Niemand hat Zeit, Dinge zu erklären, die an anderer Stelle bereits ausführlich erklärt werden.

Das Prinzip von FAQ 1: Ein Element, das alle 3 Spalten umgibt, bekommt ein bg-Bild, das sich vertikal wiederholt. Und da das umgebende Element immer so hoch ist wie die höchste Spalte, kann die (immer bis ganz unten laufende) Grafik den Eindruck gleich hoher Spalten erzeugen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:33 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023