CSS: relative dynamische (Browser-)Höhe

Alles rund um die Software-Entwicklung: Programme, Skripte, Projekte etc.
Antworten
Benutzeravatar
Soulprayer
Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 12844
Registriert: 01.07.2004, 20:42
Wohnort: Solingen

CSS: relative dynamische (Browser-)Höhe

Ungelesener Beitrag von Soulprayer » 28.03.2012, 19:18

Moin,

ich hab ja schon einiges gegoogelt, doch bezüglich dem derzeit habe ich ein CSS Layout, was ich nicht

Derzeitiges Problem:
Ich habe einen übergeordneten "wrapper", der eine dynamische breite hat und in dem drei elemente sind: header, menu und content.
header und menu sollen eine feste höhe haben, den rest davon (also der content) soll eine dynamische höhe bis zum ende des (browser-)fensters haben.
beim header und menu ist derzeit alles ok, aber der content will nicht ganz so.

hier sind die code-schnipsel die ich bislang gebaut habe:

Code: Alles auswählen

html, body {
margin: 0;
padding: 0;
height: 100%;
color: #bbb;
background-color: #161616; 
}

#wrapper {
background-color: #FFFFFF;
width: 90%;
margin: auto; /* Div soll zentriert werden */
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* FF Scroll-leiste */ 
}

#header {
min-height: 100px;
height: 100px;
text-align: left;
background-color: red;
}

#menues {
min-height: 40px;
height: 40px;
text-align: left;
background-color: blue;
}

#content {
height: auto;
text-align: left;
background-color: green;
}

Code: Alles auswählen

<body text="#000000" bgcolor="#FFFFFF">

<div id="wrapper"> 

 <div id="header"> </div> 

 <div id="menues"> </div> 

 <div id="content"> </div> 

</div> 

</body>
ich habe auch schon probiert height:auto !important; height:100%; in den content block zu integrieren, das hat allerdings nichts gebracht. (hätte mich auch gewundert)
Wenn ihr beides mal eben als css+html speichert und euch anzeigen lasst, wird in der html-seite erscheinen: der "header" und das "menues".
Der "content" ist nämlich nicht weiß (das ist der "wrapper") sondern grün!

Mein Testbrowser ist derzeit FF11, auf den IE kann ich mich ja nicht so ganz verlassen, da der ziemlich lasch mit den CSS Regeln umgeht.
Üblicherweise wird ja der Parent-Wert genommen, also habe ich irgendwo einen Denkfehler, wie ich hier zum Ziel kommen kann.
Es gibt hier doch bestimmt den ein oder anderen, der mich hier auf den grünen Zweig bringen kann?!
Für jede Hilfe bin ich dankbar!

edit:
ich habe mal kurz mein konzept neu skizziert und hochgeladen. der footer (gelb) soll quasi mit dem content abschliessen, so daß eine riesige box zentral ist, die scrollbar ist. (und nein, kommt mir gar nich erst mit frames oder iframes, das muss mit CSS realisierbar sein :) )

Gruß
Soulprayer
Dateianhänge
Unbenannt.png
Zuletzt geändert von Soulprayer am 28.03.2012, 19:26, insgesamt 1-mal geändert.
Ich bin ein UFO - ein unheimlich faules Objekt.

Benutzeravatar
Viprex
Vice Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 4590
Registriert: 08.03.2004, 18:33
Wohnort: Hohenlockstedt
Kontaktdaten:

Re: CSS: relative dynamische (Browser-)Höhe

Ungelesener Beitrag von Viprex » 11.12.2012, 16:38

Ich habe versucht zu verstehen, was du willst (dein Dateianhang ist kein Screenshot der Webseite, sondern eine Konzeptzeichnung?). Wenn ich die Höhe auf 100% im Content setze, ist doch alles schick? Mit auto geht das nicht.
Nachts essen ist der Hit!
Kommt gleich neben tagsüber essen :)

stanglwirt
Fleet Captain
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 1591
Registriert: 17.03.2004, 07:22

Re: CSS: relative dynamische (Browser-)Höhe

Ungelesener Beitrag von stanglwirt » 12.12.2012, 15:39

wo ist denn das problem? der footer fehlt ja in deinem html.
soll der footer immer sichtbar sein, auch beim scrollen? dann probier mal position:fixed und positioniere den footer an den unteren rand.
min-height: 100% beim body und wrapper könnte dabei auch hilfreich sein.
MfG
everybody´s darling is everybody´s Arschloch. (c) Franz Josef Strauß

Benutzeravatar
Soulprayer
Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 12844
Registriert: 01.07.2004, 20:42
Wohnort: Solingen

Re: CSS: relative dynamische (Browser-)Höhe

Ungelesener Beitrag von Soulprayer » 12.12.2012, 16:16

interessant, nach einem 3/4 jahr wird meine Frage erhört :)

ich hab das letztendlich anders gemacht.
Hab den Footer mit einen #horizont (top: 50%) von wo ich den #footer mit position: relative setze.
Ich bin ein UFO - ein unheimlich faules Objekt.

Antworten