19.08.2004, 15:03
|
|||
|
|||
Seitenaufbau mit DIVs und 100% Höhe
Guten Tach zusammen!
Folgende Ausgangslage: - XHTML 1.0 Strict - Seitenaufbau mit DIVs per CSS-Formatierung - DIV Header: als Kopfzeile für Logo - DIV Text: für späteren Seiteninhalt - DIV Links / Rechts: Rahmen um den Seiteninhalt mit Schattierung - DIV Footer: als Fußzeile - DIV Content: Als Haupt-DIV aller Inhalte (Höhe 100%) Problematik: Das gewünschte Erscheinungsbild wird gestört wenn der Inhalt des TEXT-DIVs großer als das Browserfenster wird. Ein Scrollbalken wird eingeblendet (für das gesamte Fenster), unterhalb des sichtbaren Fensterbreichs verlieren die DIVs ihre Formatierung. Scheinbar wird die Höhenangabe von 100% auf den sichtbaren Fensterbereich und nicht auf den relativen Seiteninhalt bezogen?! Wie kann ich die Problematik umgehen/beheben? ------ BEISPIEL ------ http://www.rollerhof-bremen.de/de/test.php Besten Dank für Lösungsvorschläge. 
|
| Sponsored Links |
|
19.08.2004, 15:50
|
|||
|
|||
|
Re: Seitenaufbau mit DIVs und 100% Höhe
Zitat:
Gib einfach für vernünftige Browser ein min-height: 100% an und nur für den IE ein height:100%; z.B. so: #content { min-height:100%; } * html #content { height:100%;} Das letzte wird nur vom IE interpretiert, der allerdings zieht den Container auch weiter, weil der Divs eher wie Tabellen behandelt.
|
| Sponsored Links |
|
02.09.2004, 00:38
|
|||
|
|||
|
Zwei DIV's
Heloooo
@terrikay: Danke für den Tipp, er hat auch mir sehr weitergeholfen. Leider stehe ich nun aber weiter an: Was ist, wenn ich zwei DIV's mit 100% Höhe will und das eine nicht mit genügen Inhalt fülle? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>css-Test</title>
<style type="text/css">
html, body{
height:100%;
padding:0px;
margin:0px;
border:0px;
}
#menu
{
position:absolute;
top:0px;
left:0px;
width: 200px;
min-height:100%;
background-color:blue;
}
* html #menu
{
height:100%;
}
#content
{
position:absolute;
top:0px;
left:200px;
width: 500px;
min-height:100%;
background-color:green;
}
* html #content
{
height:100%;
}
</style>
</head>
<body>
<div id="menu">Menu</div>
<div id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
</body>
</html>
Gibt es hier eine Lösung? Danke im Voraus Tunichtgut
|
|
02.09.2004, 09:17
|
|||
|
|||
|
__________________
</ulle>
|
|
10.09.2004, 00:17
|
|||
|
|||
|
Heloooo
Endlich habe ich wieder Zeit gefunden, es weiter zu Probieren. Zitat:
Gibt es sonst noch etwas? Ich stehe völlig an und bin mir scho fast am überlegen, ob ich nicht wieder auf html umsteigen soll  Gruss Tunichtgut
|
|
10.09.2004, 11:33
|
|||
|
|||
|
Zitat:
Wie 2 Container nebeneinander zu setzen sind siehst DU im oberen LINK. height: 100%, siehst Du hier  http://www.xhtmlforum.de/viewtopic.php?t=1498
__________________
</ulle>
|
|
12.09.2004, 16:21
|
|||
|
|||
|
Helooo
Zitat:
Nun ist das Problem, wenn der Inhalt mehr als ein Browserfenster füllt, dann ist das rechte blaue DIV (Menu) nur gerade 100 % hoh und wenn ich nach unten scrolle ist es auf einmal fertig. Ich möchte nun einfach, dass das Menu-DIV wie das Inhalts-DIV bis ans Ende der Seite reicht. Gruss Tunichtgut
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Divs mit Float auf unterschiedliche Höhe bringen | Diablo1611 | CSS | 5 | 09.04.2013 21:22 |
| 100% Höhe von Divs klappt einfach nicht. | icecold | CSS | 10 | 24.09.2010 11:25 |
| 3 DIVs - dynamische Höhe | fire90de | CSS | 2 | 02.06.2009 14:39 |
| div hat keine Höhe, wenn innere divs gefloatet werden? | Anotherone | CSS | 3 | 23.07.2006 02:25 |
| divs aneinander in der höhe ausrichten - wie ? | MS Master | CSS | 1 | 24.02.2005 17:49 |
Linear-Darstellung
