nicht angemeldet
Div 100%
0 0 0 0 0 0 
Matthias Apsel
0 0 0 Matthias Apsel
Div 100%
Moin
ich dachte eigentlich das dies bisher immer funktionierte, und stehe grad etwas auf dem Schlauch.
<!DOCTYPE html>
<html>
<head>
<title>jhkjl</title>
<style type="text/css">
#div1
{
height:100%;
background:blue;
width:200px;
}
#div2
{
height:100%;
background:green;
width:120px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
jhlkj
</div>
</div>
</body>
</html>
wie bekomm ich div1 auf 100% und div2 ebenso. Und das bitte ohne position:absolute-Bombe!
Danke
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
Hi,
wie bekomm ich div1 auf 100% und div2 ebenso.
Indem du für alle Vorfahrenelemente ebenfalls diese Höhe setzt.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Moin
Indem du für alle Vorfahrenelemente ebenfalls diese Höhe setzt.
html 100% body 100% ??? Hab ich versucht: Erfolglos!!!
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Moin
html 100% body 100% ??? Hab ich versucht: Erfolglos!!!
ich konkretisiere:
<!DOCTYPE html> <html style="height:100%"> <head> <title>jhkjl</title> <style type="text/css"> #div1 { min-height:100%; background:blue; width:200px; } #div2 { height:100%; background:green; width:120px; } </style> </head> <body style="height:100%;"> <div id="div1"> <div id="div2"> jhlkj<br/> </div> </div> </body> </html>bringt fast den gewünschten Effekt, Aber der Grüne DIV (#div2) soll sich auf den kompletten übergeordneten DIV erstecken!!
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
bringt fast den gewünschten Effekt, Aber der Grüne DIV (#div2) soll sich auf den kompletten übergeordneten DIV erstecken!!
Lass doch mal das min- weg :)
Cheers,
Baba-
Moin
bringt fast den gewünschten Effekt, Aber der Grüne DIV (#div2) soll sich auf den kompletten übergeordneten DIV erstecken!!
Lass doch mal das min- weg :)Dann ist das Phänomen, dass, wenn der Inhalt im Inneren Div länger ist als 100% Viewport, dass dann der Hintergrund nicht weiter dargestellt wird. Deswegen das min-height
Das hat schon seinen Sinn. :( jetzt könnte man sagen, dann mach bei dem Inneren nur das Min-Height, dann erstreckt sich der Hintergrund des blauen Divs nicht mehr bei entsprechender Länge...
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Om nah hoo pez nyeetz, Bobby!
wenn du das herkömmliche Boxmodell verwendest, bezieht sich height auf den Inhalt des Elementes. Du musst also padding und margin noch auf Null setzen. Alternativ gibt es box-sizing.
Matthias
--
1/z ist kein Blatt Papier.
-
Moin
wenn du das herkömmliche Boxmodell verwendest, bezieht sich height auf den Inhalt des Elementes. Du musst also padding und margin noch auf Null setzen.
Danke danke, manchmal sieht man den Wald vor lauter Bäumen nicht... Das ist DER Tip
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Moin
ich muss deoch revidiren. Schaut Euch bitte diesen Code hier an und dann wisst Ihr was ich meine!
<!DOCTYPE html> <html style="height:100%;padding:0px;margin:0px;"> <head> <title>jhkjl</title> <style type="text/css"> #div1 { position:relative; padding:0px; margin:0px; height:100%; background:blue; width:200px; } #div2 { padding:0px; margin:0px; height:100%; background:green; width:120px; } #footer { background: none repeat scroll 0 0 lightyellow; bottom: 0; height: 100px; position: absolute; width: 100px; } </style> </head> <body style="height:100%;background:gold;padding:0px;margin:0px;"> <div id="div1"> <div id="div2"> jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/>jkgkhj<br/> </div> <div id="footer">zgjg</div> </div> </body> </html>gibt es überhaupt ne Lösung hierfür?
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Om nah hoo pez nyeetz, Bobby!
gibt es überhaupt ne Lösung hierfür?
min-height 100% für div1 und 2 statt height
Matthias
--
1/z ist kein Blatt Papier.
-
Moin
min-height 100% für div1 und 2 statt height
hab ich versucht, dann funktionierts mit kurzen Texten nicht mehr.
<div id="div2"> jkgkhj<br/>jkgkhj<br/> </div>hier erstreckt sich der blaue DIV wieder nicht. :(
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Moin
da ich mir nicht anders zu helfen wusste, habe ich jetzt 2 Hintergrundgrafiken einem DIV zugewiesen und ein entsprechendes Workaround für IE 8 und kleiner eingebettet. So funktionierts wenigstens
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Om nah hoo pez nyeetz, Bobby!
da ich mir nicht anders zu helfen wusste, habe ich jetzt 2 Hintergrundgrafiken einem DIV zugewiesen
Es kann ja auch border sein:
html, body { height: 100%; margin: 0; padding: 0; } #div1 { position: relative; padding: 0; margin: 0; min-height: 100%; background: blue; width: 80px; /* */ border-left: 120px solid green; /* */ } #div2 { padding: 0; margin: 0 0 0 -120px; /* */ height: 100%; background: green; width: 120px; } #footer { background: lightgrey; width: 100px; height: 100px; position: absolute; left: -120px; /* */ bottom: 0; }Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-
-
-
-
-
-