nicht angemeldet
Div height: 100% plus Header 50px ohne Scrollbar
0 
Matthias Apsel
0 Matthias Apsel
0
Div height: 100% plus Header 50px ohne Scrollbar
Mal wieder eine Frage zu height 100%
Ich habe folgendes Layout:
Oder hier auch noch mal als HTML / CSS:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html {
height: 100%;
}
body {
background-color: #4d4d4d;
margin: 0;
padding: 0;
height: 100%;
}
#contact_header {
height: 50px;
}
#menu_bar {
width: 200px;
height: 100%;
float: right;
background-color: #9b6200;
}
#content {
height: 100%;
background-color: #000000;
}
#organigram {
height: 60%;
background-color: #d9d9d9;
overflow: hidden;
}
#products {
height: 20%;
background-color: #d9d9d9;
overflow: hidden;
}
#relationships {
height: 20%;
background-color: #d9d9d9;
overflow: hidden;
}
</style>
</head>
<body>
<header id="contact_header">
</header>
<section id="menu_bar">
<p>Menü</p>
</section>
<section id="content">
<div id="organigram">
<header>
<h2>Organigramm</h2>
</header>
</div>
<div id="products">
<header>
<h2>Produkte</h2>
</header>
</div>
<div id="relationships">
<header>
<h2>Beziehungen</h2>
</header>
</div>
</section>
</body>
</html>
Das sieht zu 90% so aus wie es soll. Nur da es sich nicht um eine Website handelt sondern eine Applikation darf der Scrollbar dort nicht sein. Der Scrollbar ist da weil sich zur Höhe von content und menu_bar noch die Höhe des Headers (50px) addiert.
Ich habe sowohl im Forum, als auch bei Google viele Diskussionen zu dem Thema gefunden. Die Lösungsansätze für einen Workaround beziehen sich aber mehr auf Tricks wie man es so aussehen lassen kann als ob das auf 100% Höhe wäre und nicht so, dass es wirklich so funktioniert. Vor allem das absolute Positionieren des Headers hift mir nicht weiter.
Für das Interface der Anwendung ist es wichtig, das beim Skalieren des Browserfensters die drei divs im Content sich proportional mit vergrößern (60%, 20%, 20%). Das heißt ich brauche die 100% der Elternelemente. Oder gibt es eine andere Möglichkeit die auf 60/20/20 zu verteilen ohne das ein Elternelement auf 100% Prozent Höhe ist (und die Füllen dann vertikal trotzdem den ganzen Content aus?).
Gibt es da irgendeine Möglichkeit ähnlich wie bei einem Frame den Header ganz herauszunehem, so dass die 100% erst darunter anfangen. Oder sonst irgendeinen Hack.
Tut sich da bei css3 vielleicht was. Ich habe z.B. die Möglichkeit von cal() gefunden. Da die Anwendung aber für Webkit optimiert wird geht das leider nicht.
Und wenn gar nichts geht- geht das mit Javscript - und wie?
Sorry, aber ich bin ein bisschen verzweifelt weil ich das nun mal umsetzen muss - der Kunde sitzt mir schon im Nacken
Danke
Andreas
-
-
Wäre schön wenn es funktionieren würde - tut es aber dann doch nur in recht wenigen Browsern ...
-
-
Om nah hoo pez nyeetz, cdash!
Tut sich da bei css3 vielleicht was. Ich habe z.B. die Möglichkeit von cal() gefunden. Da die Anwendung aber für Webkit optimiert wird geht das leider nicht.
Wer lesen kann ...
Matthias
--
1/z ist kein Blatt Papier.
-
Hi,
Für das Interface der Anwendung ist es wichtig, das beim Skalieren des Browserfensters die drei divs im Content sich proportional mit vergrößern (60%, 20%, 20%). Das heißt ich brauche die 100% der Elternelemente.
Die vollen 100%, oder die 100% − 50px?
Oder gibt es eine andere Möglichkeit die auf 60/20/20 zu verteilen ohne das ein Elternelement auf 100% Prozent Höhe ist (und die Füllen dann vertikal trotzdem den ganzen Content aus?).
Ggf. mit absoluter Positionierung – jeweils top und bottom.
Und wenn gar nichts geht- geht das mit Javscript - und wie?
Ja, JavaScript kann Elementmaße auslesen und setzen.
Sorry, aber ich bin ein bisschen verzweifelt weil ich das nun mal umsetzen muss - der Kunde sitzt mir schon im Nacken
Don’t bite off more than you can chew …
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Für das Interface der Anwendung ist es wichtig, das beim Skalieren des Browserfensters die drei divs im Content sich proportional mit vergrößern (60%, 20%, 20%). Das heißt ich brauche die 100% der Elternelemente.
Die vollen 100%, oder die 100% − 50px?
100% - 50px
Oder gibt es eine andere Möglichkeit die auf 60/20/20 zu verteilen ohne das ein Elternelement auf 100% Prozent Höhe ist (und die Füllen dann vertikal trotzdem den ganzen Content aus?).
Ggf. mit absoluter Positionierung – jeweils top und bottom.
In die Richtung habe ich auch schon gedacht, aber mal abgesehen von der Position sind die ja dann immer noch nicht 60% oder 20% groß sondern nur so groß wie ihr Inhalt? Oder?
Sorry, aber ich bin ein bisschen verzweifelt weil ich das nun mal umsetzen muss - der Kunde sitzt mir schon im Nacken
Don’t bite off more than you can chew …
Manchmal erwischt es einen halt ;-)
-
Hi,
Ggf. mit absoluter Positionierung – jeweils top und bottom.
In die Richtung habe ich auch schon gedacht, aber mal abgesehen von der Position sind die ja dann immer noch nicht 60% oder 20% groß sondern nur so groß wie ihr Inhalt? Oder?
Oder.
Das hinter dem – habe ich nicht nur geschrieben, weil am Ende der Zeile noch Freiraum aufgefüllt werden wollte :-)MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-