cdash: Div height: 100% plus Header 50px ohne Scrollbar

Beitrag lesen

SELF-Forum

Div height: 100% plus Header 50px ohne Scrollbar

cdash
– Informationen zu den Bewertungsregeln

Mal wieder eine Frage zu height 100%

Ich habe folgendes Layout:

grid

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

Beitrag melden
–
Informationen zu den Bewertungsregeln