zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden zwei Divs untereinander gleich hoch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.05.2008, 23:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2008
Beiträge: 3
Moonphoenix befindet sich auf einem aufstrebenden Ast
Standard zwei Divs untereinander gleich hoch

Hallo an alle.

Ich habe folgendes Problem:
ich möchte 2 divs untereinander so gestalten, dass Sie dynamisch das gesamten Browserfenster in 2 exakt gleiche Partien unterteilen - also immer die maximal mögliche gleiche Höhe haben.

bisheriges html:

Code:
<body>
   <div id="boxoben">content oben</div>
   <div id="boxunten">content unten</div>
</body>


bisheriges css:

Code:
body {
       margin: 0px;
       padding: 0px;
       height: 100% // height:auto; ??????????????
       width: 100%;
       overflow: none;
       }

#boxoben {
       height: auto;
       background-colour: #fff8de;
       }

#boxunten {
       height: auto;
       background-colour: #8f4534;
       }
so will das nicht klappen. Ich hatte es auch schon mit faux columns versucht aber da die divs nicht nebeneinander bestehen haut das auch nicht hin.

Ich muss vermutlich die Höhe von body irgendwie in einen Wert umgerechnet bekommen-aber nur wie ist die Frage - OHNE JAVA!!!!!!

Gibt es hierfür einen ähnlichen Trick wenn möglich ohne JS (steht leider nicht immer zur Verfügung)? und in meinem vollständigen Layout gehts nun mal nicht mit position absolute und irgendwelchen koordinaten. Es muss auf jeden Fall immer einen exakten Teilungshorizont geben.

Danke schon mal im Vorraus für eure Vorschläge.
P.S.:Achtung ich bin nicht der Superchecker in sachen div-Handling-sonst würde ich die Antwort vermutlich schon kennen. also bitte geht sanft mit mir um bei euren Antworten

Geändert von Moonphoenix (14.05.2008 um 03:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.05.2008, 23:26
Benutzerbild von RottenRoller
Benutzer
neuer user
 
Registriert seit: 12.05.2008
Ort: Flingern rules!
Beiträge: 53
RottenRoller befindet sich auf einem aufstrebenden Ast
Standard

hi!

musste mit javascript lösen. den viewport ausmessen und dann die höhe : 2. aber frag mich nicht wie. googlen hilft!

cheers!
__________________
www.freizeitler.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.05.2008, 23:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2008
Beiträge: 3
Moonphoenix befindet sich auf einem aufstrebenden Ast
Standard

irgendwie hab ich das befürchtet ...



dennoch danke für deine Antwort

Geändert von Moonphoenix (14.05.2008 um 00:04 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 14.05.2008, 00:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2008
Beiträge: 3
Moonphoenix befindet sich auf einem aufstrebenden Ast
Standard

hab schon ne lösung gefunden so siehts aus wie es bei mir funktioniert

html:

Code:
<head>
<script type="text/javascript">
<!--
function machdivgross()
{
 var viewportwidth;
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.getElementById("boxoben").style.height=(viewportheight/2)+"px";
document.getElementById("boxunten").style.height=(viewportheight/2-1)+"px";
}
//-->
</script>




	</head>
	<body onresize="machdivgross();">
		<div id="boxoben">content oben</div>
		<div id="boxunten">content unten</div>
		<script type="text/javascript">
<!--
	machdivgross();
//-->
</script>

	</body>
</html>


css:

Code:
body {
margin: 0px;
padding: 0px;
height: auto;
width: 100%;
overflow: none;
}

#boxoben {
margin: 0px;
padding: 0px;
background-color: #fff8de;
}

#boxunten {
margin: 0px;
padding: 0px;
background-color: #8f4534;}

Geändert von Moonphoenix (14.05.2008 um 03:55 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 14.05.2008, 00:35
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Es kann sein, dass ich die Frage nicht verstanden habe. Falls aber doch:
Code:
html,
body {
	height: 100%;
}
#boxoben,
#boxunten {
	height: 50%;
	overflow: auto;
}
Grüße: Emil
Mit Zitat antworten
  #6 (permalink)  
Alt 14.05.2008, 18:23
Neuer Benutzer
neuer user
 
Registriert seit: 13.05.2008
Beiträge: 4
DaZaRt befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
Es kann sein, dass ich die Frage nicht verstanden habe. Falls aber doch:
Code:
html,
body {
	height: 100%;
}
#boxoben,
#boxunten {
	height: 50%;
	overflow: auto;
}
Grüße: Emil
Ich glaube die größe der boxen variert und steht nicht fest
Mit Zitat antworten
  #7 (permalink)  
Alt 15.05.2008, 00:13
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Hallo DaZaRt,
meinst Du damit, es sind keine Breiten-Angaben da?
Dann muss ich die Frage wirklich misverstanden haben.
Aber bitte: Breite 250px und zentriert ( Zwei FooterSickAlt als Zugabe ).

Grüße: Emil
Angehängte Grafiken
Dateityp: jpg zwei_divs.jpg (12,8 KB, 11x aufgerufen)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 Divs (untereinander) parallel mit 3 Divs (untereinander) SimonK. CSS 16 19.02.2009 09:56
2 Divs untereinander Bulvaye CSS 2 04.10.2008 00:50
Keine blauen Links/ Div verlinken/ Div's untereinander anornen timbo CSS 3 03.01.2007 17:47
Divs immer untereinander in Opera? lavagna CSS 1 30.09.2005 11:42
1 div links, 2 div's untereinander daneben jensr CSS 9 01.07.2004 00:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:56 Uhr.