nicht angemeldet
Div auf verf. Bereich ausdehnen bei 4 margin-Angaben
Hallo,
ich habe ein div, das sich, unter Berücksichtigung von 4 margin-Angaben, auf den verfügbaren
Bildschirmbereich ausdehnen soll.
Ich hatte dieses Problem an anderer Stelle mit einem Eingabefeld, hier sollte sich das Textfeld
über die verbleibende Bildschirmbreite erstrecken, und da gab es keine css-Lösung.
Vor längerer Zeit habe ich im Internet mal etwas zu floatenden Div's gefunden, diese arbeiten aber
alle mit Prozentwerten und mehreren Spalten, ich habe aber nur einen begrenzten div. Diese Ansätze
helfen mir somit leider nicht weiter.
Könnte Ihr mir hier Anregungen/Tips geben, wie ich das umsetzen kann?
Vielen Dnak im Voraus.
Gruß
Enrico
-
Grüße,
falls ich dich richtig verstehe, willst du dass ein div die seite füllt - mit margin?
dann kansnt du dem einfach 100% breite/höhe vergeben (falls es das ist wa du brauchst). vergiss bloß nicht die gleiche 100% sämtlichen elternelementen zu geben.
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
http://www.sexgott-or-not.com/?test=428054-
Hallo bleicher,
erstmal danke für Deine Rückantwort.
Leider hast Du mich hier nich ganz verstanden.
Ich habe in den css-Definitionen des Div's die Angabe
margin: 14px 70px 23px 186px;
angegeben.
Der Div selber soll sich nun auf die verbleibende Bildschirmbreite ausdehnen,
sowohl vertikal als auch horizontal.Und da weiß ich keine Lösung.
Gruß
Enrico-
Hallo,
Ich habe in den css-Definitionen des Div's die Angabe
margin: 14px 70px 23px 186px;
angegeben.
Der Div selber soll sich nun auf die verbleibende Bildschirmbreite ausdehnen,
sowohl vertikal als auch horizontal.Vertikal wird so nicht funktionieren, siehe meinen Testcode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Bereich in der Höhe unabhängig vom Inhalt variabel auseinanderziehen</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> html, body { height:100%; margin:0; padding:0; overflow:hidden; } /* div { margin: 14px 70px 23px 186px; background-color:#00AEAD; } */ /*Das kann nach der [link:http://www.w3.org/TR/CSS21/visudet.html#normal-block@title=Definition der Höhenberechnung im CSS] den Bereich nicht in der Höhe auseinanderziehen.*/ /* div { position:absolute; top:14px; right:70px; bottom:23px; left:186px; background-color:#00AEAD; } */ /*Das kann der IE bis Version 6 nicht. Außerdem will absolute Positionierung gut überlegt sein.*/ div { margin: 2% 70px 5% 186px; height:93%; background-color:#00AEAD; } /*Das funktioniert, allerdings in der Höhe nur prozentual.*/ </style> </head> <body> <div> Test </div> </body> </html>Eventuell helfen Dir ja auch Faux Columns weiter.
viele Grüße
Axel
-
Hallo Axel,
vielen Dank für Deine Erläuterungen und die Links.
Da ist man, angesichts der Komplexitität, die geboten ist, wenn man einen div oben, unten, links und rechts
zum Rand des Browserfensters versetzen und über den sich dadurch ergebenden verbleibenden Anzeigebereich
erstrecken lassen will, fast geneigt, wieder zum verpöhnten Tabellen- oder/und Frames-Layout zurückzukehren.Ich mag es nicht glauben, dass mein Vorhaben nicht einfach so umsetzbar ist.
Mit traurigen Grüßen
Enrico-
Hallo,
ich versuche jetzt, mein Vorhaben über eine eigene div-Konstruktion umzusetzen:
+-----------------------------------------------------------------------+
|div "Abstand_Oben" |
+-------------------+------------------------------+--------------------+
|div "Abstand_Links"| div "Anzeigebereich" |div "Abstand_Rechts"|
| | | |
+-------------------+------------------------------+--------------------+
|div "Abstand_Unten" |
+-----------------------------------------------------------------------+Die Ausgabe der div-Bereiche "Abstand_Oben", "Abstand_Links" und "Abstand_Rechts"
funktioniert, beim div-Bereich "content" leider nur an links, oben und rechts
(dies habe ich über die gelbe Umrandung festgestellt - mehr dazu im nachfolgenden
Code).Was ich noch nicht umgesetzt bekommen habe ist der Abstand unten mit dem gleichnamigen
div-Bereich.Der Code sieht folgendermaßen aus:
<html>
<head>
<style>
html,
body
{
border: 0px;
height: 100%;
margin: 0px;
max-height: 100%;
overflow: hidden;
padding: 0px;
}.Anzeigebereich
{
display:block;
height:100%;
max-height:100%;
overflow:hidden;
position:relative;
z-index:3;
background:red;
border:2px solid yellow;
}.Abstand_Links
{
display:block;
background:green;
width:195px;
height:100%;
float:left;
}.Abstand_Rechts
{
display:block;
width:69px;
height:100%;
float:right;
background:blue;
}.Abstand_Oben
{
display:block;
height:22px;
position:relative;
top:0px;
background:gray;
}.Abstand_Unten
{
display:block;
height:22px;
position:absolute;
bottom:0px;
background:gray;
}
</style>
</head>
<body>
<div class="Abstand_Links"></div>
<div class="Abstand_Rechts"></div>
<div class="Abstand_Oben"></div>
<div class="Abstand_Unten"></div>
<div class="Anzeigebereich"></div>
</body>
</html>Ich hoffe, dass mein Ansatz nicht bloße Glückssache war, das Ergebnis gibt mir, wenn
aktuell leider auch nur zum Teil, recht, bis auf dasProblem, dass der div-Bereich
"Anzeigebereich" nicht bündig mit dem unteren Rand des Browserfensters abschliesst
(dann würde ich den zu Testzwecken anzuzeigenden gelben Rahmen unten sehen).Vielleicht gibt es auf diesem Wege ja eine Lösung.
Gruß
Enrico-
Hallo Enrico
Was ich noch nicht umgesetzt bekommen habe ist der Abstand unten mit dem gleichnamigen
div-Bereich.Und genau das funktioniert auch mit deinem vorherigen Ansatz nicht.
Vielleicht gibt es auf diesem Wege ja eine Lösung.
Es ist keine Lösung, Unmengen an Elementen neben- und untereinander zu setzen, nur um die gewünschten Abstände zu realisieren.
Dein Problem ist die Höhe.
Bei der Breite bedeutet der Standardwert auto, dass der zur Verfügung stehende Platz ausgenutzt wird.
Bei der Höhe hingegen nimmt ein Element nur die durch den Inhalt bedingte notwendige Höhe ein.Wenn du allerdings für dein Element und alle seine Vorfahren 100% Höhe definierst, wird es zu hoch, weil sich die Höhenangabe auf die innere Höhe bezieht und damit die definierten Anstände noch dazu kämen, es würde in deinem Beispiel (
margin: 14px 70px 23px 186px;) also 100% der Browserfensterhöhe plus 37px werden.Für einigermaßen standardkonforme Browser (wie z.B. Firefox) kannst du
position:absolutemit Angaben für top, right, bottom und left verwenden.Der IE braucht dann allerdings eine Sonderbehandlung, weil er nicht in der Lage ist, die richige Höhe anhand der Angaben für top und bottom zu berechnen. Um ihn auch zu der gewünschten Darstellung zu überreden, kann er in den Quirksmodus geschickt werden, wo er ein falsches Boxmodel anwendet, und dann (nur für ihn) padding verwendet werden.
Das könnte dann komplett etwa so aussehen (funktioniert zumindest im IE6):<!--IE quirks mode please--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Test</title> <style type="text/css"> [code lang=css]html, body { margin:0; padding:0; height:100%; } /* Angaben für standardkonforme Browser */ #anzeigebereich { background-color:#00AEAD; position:absolute; top:14px; right:70px; bottom:23px; left:186px; } /* Angaben für IE mit Star-HTML-Hack */ * html body { padding: 14px 70px 23px 186px; } * html #anzeigebereich { height:100%; position:static; } ~~~</style> </head> <body> <div id="anzeigebereich">Anzeigebereich</div> </body> </html> [/code] Die Angaben mit [Star-HTML-Hack](http://de.selfhtml.org/css/layouts/browserweichen.htm#star_html_hack) werden wohl extra für IE7 noch durch den [Star-Plus-HTML-Hack](http://de.selfhtml.org/css/layouts/browserweichen.htm#star_plus_html_hack) erweitert werden müssen. Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
Dein Lösungsansatz funktioniert im Firefox perfekt!!! :-)
Und ist dazu noch so kompakt :-)
Das war genau das, wonach ich gesucht hatte.
1.000 Dank hierfür.
Gruß
Enrico
-
-
-
-
-
-