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

Height 100% eines DIV

NetAktiv

NetAktiv

Senior HTML'ler
Hallo,

ich will meine Homepage wie folgt aufteilen. Body=100Platz.
In der Mitte horizontal zentriert ein used-Div fester Breite, ungenützter Rand soll dynamisch kleiner werden. Beim mittleren used-DIV oben ein menu-DIV fester Höhe und darunter ein data-DIV. Das data-DIV soll 100% des verbleibenden Platzes einnehmen.

Das schaffe ich nur, wenn ich position:fixed und height:100% setze, aber dann bekomme ich am Window/Body bei Overflow des data-DIV keine Scrollbalken mehr (höchstens am DIV mit overflow:scroll). Bei allen anderen Versuchen mit height:100% wurde das data-DIV um die Höhe des menu-DIV zu hoch und ich habeScrollbalken, auch wenn das data-DIV nur zum Teil gefüllt ist.

Ich habe mein Beispiel mal auf ein Minimum reduziert. Wie kann ich es schaffen, dass das data-Div so wie bei Fixed bis zum Ende reicht, aber bei Overflow Scrollbalken am Window sind.

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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body { background-color: #DFDFF7; 
    position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;
    width: 100%; height: 100%; margin: 0px; padding: 0px; text-align: center; }
#used { background-color: red; margin: 0 auto; padding: 0px; 
        width: 950px; top: 0px; height: 100%; }
#menu {    background-color: yellow; top: 0px; height: 30px; padding: 0; margin: 0; }
#data {    position:fixed;    background-color: blue; width:800px; height:100%; }
</style>
<title>Titel</title>
</head>
<body>
<div id="used">
<div id="menu">Platzhalter für Menü</div>
<div id="data">Daten (der Hauptteil) soll bis unten gehen und vernünftig scrollen</div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Hallo, ich denke ich habe dein Problem nicht 100% verstanden, dennoch hier ein paar Lösungsvorschläge:

Du möchtest einen Scrollbalken des Browsers haben, wenn der Inhalt des data-div 100% höhe übersteigt?

-Dann probiere doch mal : anstatt height:100% des data-divs min-height:100% und nehm das position:fixed; dort weg.
Damit die rechte leiste mitwächst dem used-Div die height wegnehmen.

Die Alternative wäre dem data-div ein overflow:scroll zu geben.

Ich hoffe die Idee war richtig von mir, anonsten erläuter bitte nochmal deine Absicht.
 
Zuletzt bearbeitet:
Hallo Marv,

ich denke, deine Vorschläge zielen in die richtige Richtung, aber sie lösen das Problem nicht.

1) min-height macht keinen unterschied zu height
2) used-div 100% wegnehmen endet darin, dass nur die mit Daten gefüllte Höhe auch genutzt wird.
3) overflow am data-div macht auch den scroll dort.
Ich versuch nochmal zu erklären, was ich erreichen will.
1) Normales Scrollverhalten, also bei data-DIV overflow soll es anwachsen und Window-Scrollbars erscheinen.
2) Rechts und links soll alles frei bleiben
3) Von Anfang an soll das data-DIV bis unten an das Browser-Window gehen, auch wenn es nur teilweise gefüllt ist.
Derzeit gehen 1) und 2) bei mir, aber 3 schaffe ich nicht.
a) data-Div position:fixed führt zum scrollbalken-problem
b) data-Div position:<other> führt dazu, dass es schon zu Anfang um die Höhe des menu-DIV zu lang ist, also sofort scrollbalken kommen. Derzeit nutze ich diese Einstellung, wobei ich data-div height:90% setze. Dann habe ich unten allerdings eine Lücke, die von der Auflösung abhängt.

Grüße, Rainer
 
Mir ist jetzt auch aufgefallen, dass min-height nur bewirkt, dass der äußere div mitwachsen kann wenn der inhalt mehr wird aber bei wenig inhalt der innere div nicht an den Boden reicht.
Bin jetzt auch schon dabei die navi absolut zu positionieren, damit der inhalt von oben 100% erreichen kann,
damit der inhalt nicht verschwindet muss aber ein margin-top und zwar durch ein neues inneres div im Data div
weil sonst das data ja wieder größer würde. Und durch collapsing margin wird es das auch. Außer ich schieb ein padding-top 1px ins äußere was aber 1px Design Fehler macht.

Alles in allem find ich das ziemlich tricky und weis gar nicht mehr was ich eigentlich gerade mache XD. Aber ich versuchs noch.
 
So hier mal mein aktueller Vorschlag mit Code:
-Am anfang 100% höhe
-mit sehr viel inhalt wird das div größer und es gibt einen normalen scrollbalken
-Der inhalt muss jetzt ins content div


Ist das das was du sucht?
-Das einzige Problem wäre jetzt nurnoch der rechte Balken der nicht mitwächst. Und hat noch den 1px Fehler

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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body { background-color: #DFDFF7; 
    position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;
    width: 100%; height: 100%; margin: 0px; padding: 0px; text-align: center; }
#used { background-color: red; margin: 0 auto; padding: 0px; 
        width: 950px; top: 0px; height:100%;}
#menu {    width:950px; position:absolute; background-color: yellow; top: 0px; height: 30px; padding: 0; margin: 0;  }
#data {    background-color: blue; width:800px; min-height:100%; padding-top:1px; margin-top:-1px;}
.content	{margin-top:30px; }
</style>
<title>Titel</title>
</head>
<body>
<div id="used">
<div id="menu">Platzhalter für Menü</div>
<div id="data">
	<div class="content">
		Daten (der Hauptteil) soll bis unten gehen und vernünftig scrollen
	</div>
</div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Hallo Marv,

zunächst mal danke für deine Bemühungen. Der rechte Balken (rot) hat eigentlich keine Wirkung, außer für mich im Test den used-div anzuzeigen. Bei der realen Umsetzung hat der keinen Background, er dient ja nur zum Zentrieren der enthaltenen DIV.

Es ist nun fast das, was ich will, es klappt in Firefox4, Safari 5, Chrome 11 und Opera 10. Aber im IE 9 habe ich nach wie vor von Anfang an einen Scrollbalken, auch wenn kaum Daten enhalten sind. Bei mir hat der Balken zwar nur noch etwa die halbe Höhe des Menüs, aber er ist noch da :-(. Ich bekomme ihn nur weg, wenn ich die Höhe des used-DIV auf 98% setze. Da es bei 4 von 5 Browsern geht, nehme ich eher an, dass es sich da um eine Problem des IE handelt. Das IE-Explorer Problem würde ich nicht weiter verfolgen, das mit den 98% und einem kleinen Rand unten wäre OK für mich.

Ich habe nun noch versucht, unter dem neuen content-DIV ein copyright-DIV einzutragen.
HTML: 
<div style="background-color: white; bottom:0px; width:950px">Copyright</div>
Es sollte am Anfang unten stehen und bei größeren Seiten dann nach unten geschoben werden. Versucht habe ich es an verschiedenen Stellen und mit diversen position-Einstellungen, leider ohne Erfolg. Derzeit löse ich es, indem ich dem content-DIV eine min-height gebe, damit das Copyright bei wenig ausgenutzten Seiten nicht zu weit oben steht. Eventuell hast dazu einen Tipp.
 
Zuletzt bearbeitet:
So habe das mal probiert und den durch den 1px padding entstandenen Scrollbalken beim IE entfehrnt indem ich das collapsing margin mit floaten verhindert hab.
Der footer mit copyright müsste so jetzt eigentlich funktionieren.
Damit das auch im IE 7 funktioniert hab ich nochmal Browserspezifischen Code eingefügt im Stylesheet (negatives margin-top ging sonst nicht).
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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body { background-color: #DFDFF7; 
    position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;
    width: 100%; height: 100%; margin: 0px; padding: 0px; }
#used { background-color: red; margin: 0 auto; padding: 0px; 
        width: 950px; top: 0px; height:100%;}
#menu {    width:950px; position:absolute; background-color: yellow; top: 0px; height: 30px; padding: 0; margin: 0;  }
#data {    background-color: blue; width:800px; min-height:100%; margin-top:-20px;}
.content	{margin-top:55px; float:left;}
.footer	{ bottom:0px; height:20px; background:orange; width:950px;}
.clear	{
clear:left;
}
</style>


 <!--[if lte IE 7]>
        <style type="text/css">
body { 
     margin-top:-20px;
}
#menu {    
	margin-top:21px;
}
        </style>
    <![endif]-->


<title>Titel</title>
</head>
<body>

<div id="used">
<div id="menu">Platzhalter für Menü</div>
	<div id="data">
		<div class="content">
			Daten (der Hauptteil) soll bis unten gehen und vernünftig scrollen
			
			
		</div>
		<div class="clear"></div>
	</div>
	<div class="footer">Hier kommt das Copyright</div>
</div>

</body>
</html>
 
@elroy: die dort vorgeschlagene Lösung hatte genau den Nachteil, den ich vermeiden wollte, nämlich die Scrollbars am data-DIV zu haben. Außerdem war der Footer im Beispiel fixed.

@Marv: SUPER, genau das war es und auf den Clear wäre ich nie gekommen. Auf den Hack mit IE lte 7 vermutlich auch nicht. Mir kommt das Ganze doch unnatürlich komplex vor, dass man da so viele Extra-Div benötigt. Egal wie, du hast eine Lösung gefunden und dafür nochmals herzlichen Dank :D.

Grüße, Rainer
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben