gemischte Größenangaben

Comet

Comet

Administrator
Hallo Leute!

Hat einer von euch eine Ahnung ob man mit css folgende Konstellation irgendwie abbilden kann:

Code: 
 _____   ______________
|     | |              |  
| div | |     div      |  100% Höhe für Beide div's
|     | |              |
 -----   --------------
200px      restliche
            Breite
        des Bildschirmes
 
Hallo,

würd ich mal so probieren:
Code: 
<div style="float: left; width: 200px; height: 100%; border: 1px solid red;"></div>
<div style="margin-left: 200px; height: 100%; border: 1px solid blue;"></div>

planet4.
 
Ich habe es jetzt zwar nicht getestet, aber ich glaube wenn du dem rechten div einen margin-left mit 200px verpasst, steht es viel zu weit rechts. Gib stattdessen nur 5px oder halt den Abstand den du zwischen den beiden divs haben willst!

mfg
flo
 
So wies planet geschrieben hat, funzt das schon.

Allerdings nicht vergessen:
PHP: 
<style>
body, html { height: 100%; margin: 0px; padding: 0px;}
</style>

und die border der container auch auf 0px, sonst gibts scrollbalken.
 
Hallo,

margin:0 ist okay und bewirkt, dass die Browservoreinstellungen überschrieben werden, die Container wirklich bei 0 anfangen, ohne Rand an den Seiten zu lassen. padding:0 kann man machen, wenn man will, aber warum für den body height: 100%?
und warum border der Container auf 0? Ein Scrollbalken entsteht nur am rechten Rand, weil der Inhalt an Höhe(100%) plus border_oben_und_unten mehr ist als 100%. (Aber Inhalt ist ja sowieso manchmal länger...) Jedenfalls entsteht kein horizontaler Scrollbalken. ( naja, die farbigen Rahmen stehen ja auch nur da, damit man die Container sieht...)

planet4.
 
PHP: 
<style>
body, html { height: 100%; margin: 0px; padding: 0px;}
</style>

</head>

<body>
<div style="float: left; width: 200px; height: 100%; background-color:#0033CC;"></div>
<div style="margin-left: 200px; height: 100%; background-color:#006600;"></div>
</body>

Warum body auf 100% weis ich nicht 100%ig ;) ... Ich denke aber:
Das sich der <Body> in der Höhe nach dem Content innen drinnen anpasst - und wenn kein Content drinnen ist, dann isser 0 hoch und man sieht die divs nicht (bei mir FF2.0 getestet) - kannst gerne ausprobieren... Beispiel oben gepostet.... Auf alle fälle wenn ich body 100% rausnehme ist das Fenster leer.

Das man nur rechts den Scrollbalken hat stimmt natürlich - da hab Ich nicht so aufgepasst... Das mit dem "Inhalt ist sowieso manchmal mehr als eine Seite" ist Ansichtssache - warum benötigt man dann ein Layout was 100% hoch ist??? ... Weils eben nur manchmal länger ist oder man eine unscrollbare Seite basteln will.
Muss da ehrlich sagen, dass die Anfrage von Comet etwas ungenau ist: 100% Fensterhöhe oder 100% Contenthöhe???

Bei 100% Contenthöhe muss man wahrscheinlich eh auf den Bordertrick zurückgreifen weil sich der eine div nicht an den anderen div anpasst... oder man verschachtelts geschickt :) .... oder ich irre mich :whacky: !

Liebe Grüße, Bubu
 
Hi Leute!

Danke erstmal für eure Ideen, ich werde das sobald als möglich testen.
Warum ich das brauche ? --> ich will den gesamten Anzeigebereich ausnutzen ...
 
Tja... ähhh... keine Ahnung.
Genau das selbe bsp???

Dreamweaver Std-Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Weder IE6 noch FF2.0 zeigt mir irgendetwas an wenn ich kein body height 100% hab.
Win2000 - FF2.0 - IE6.0
 
hmm... der Doctype war bei mir anders:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

wenn ich ihn so wie bei dir hinschreib, bekomm ich auch nichts angezeigt...

aber warum??

planet4.
 
quirks ist mir zu unsicher, da wären aber sicherlich andere Schweinerein möglich:

Habe die oberen Beispiele nachvollziehen können und dachte, daß ich diese auch adaptieren kann, hat aber nicht funktioniert, folgende neue Aufgabenstellung:
Code: 
 ______________________
|          div         |  200px Höhe und der Rext im unteren Bereich
 ----------------------
 _____   ______________
|     | |              |  100% Höhe für Beide div's
| div | |     div      |  
|     | |              |
 -----   --------------
200px      restliche
            Breite
        des Bildschirmes

Danke schon vielmals, ich denke aber, daß dies nicht wirklich lösbar ist.
 
Hmmm...

Ich denke ohne Scrollbalken, oder?
könnte man nicht mit JS die Seitenhöhe berechnen und dann vom unteren container die 200px abziehen?


***EDIT: Ahhhh!!! Oder:

Du gibst deinen zwei containern ein padding-top: 200px; und schiebst deinen headbereich mit position: absolute; über die zwei container :cool: ! ... bzw... wenn das padding nicht funzt (wie bei mir) weil es die höhe um 200px erweitert, kann man ja ein (bitte jetzt weghören) spacer div in die Container reinpappen - ODER: ein zweites div in die Container mit margin-top: 200px;


@Dk-denz: welcher doc war quirx? Meiner oder der von Planet?
 
Zuletzt bearbeitet:
Hi,
@bubu: der kürzere Doctype ist Quirks-Mode

@Comet: bei intensivstation gibt's doch massig solche Templates auf CSS-Basis...

müsste ungefähr so gehen:
Code: 
<div style="position: relative; height: 100%; border: 1px solid blue; overflow: hidden;">

	<div style="height: 200px;background-color: #eeeeee;"></div>
	<div style="float: left; width: 200px; height: 100%; background-color:#0033CC;"></div>
	<div style="margin-left: 200px; height: 100%; background-color:#006600;"></div>

</div>

und das dazu, wenn kein Quirks-Mode:
Code: 
<style type="text/css">
body, html {  height: 100%; margin: 0px;}
</style>

schöne Grüße
planet4.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben