zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 div: jeweils px und % angaben auf 100%

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.03.2012, 16:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2011
Beiträge: 18
napoli befindet sich auf einem aufstrebenden Ast
Standard 2 div: jeweils px und % angaben auf 100%

hi,
ich bekomme zZt leider nicht hin 2 div innerhalb eines elterndivs vertikal zu "stapeln".

ein div hat height: 200px;
das andere: 100%

ich möchte nun das beide divs 100% des elterndivs füllen

hier mal ein konstrukt:

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html{
	height:100%;
	margin:0 auto;
}
#header {
	background-color: yellow;
	height: 100%;
	width: 100%;
}
#b1 {
	background-color: blue;
	width: 100%;
	height: 200px;
}
#b2 {
	background-color: red;
	width: 100%;
	height: 100%;
}
</style>
</head>

<body>

<div id="header">
  <div id="b1"></div>
  <div id="b2"></div>
</div>


</body>
</html>
klar könnte man jetzt bei #b2 height: 50%; machen, allerdings wollen wir doch variabel arbeiten und demnach, muss eine richtige lösung her.

mfg

Geändert von napoli (25.03.2012 um 17:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.03.2012, 17:12
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Ich verstehe leider nicht, was du bezwecken möchtest.

Wenn es dir nur darum geht #b1 und #b2 (was ist b1?, was ist b2?) genau übereinander zu legen und das header-Element sowieso eine feste Höhe hat, dann kannst du header relativ positionieren und dadurch für #b1 und #b2 absolute Positionierung verwenden.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.03.2012, 17:14
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von napoli Beitrag anzeigen
allerdings wollen wir doch variabel arbeiten und demnach, muss eine richtige lösung her
Und was heißt für dich "variabel arbeiten"?
Mit Zitat antworten
  #4 (permalink)  
Alt 25.03.2012, 17:18
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
Und was heißt für dich "variabel arbeiten"?
Feste Höhe...

scnr
Mit Zitat antworten
  #5 (permalink)  
Alt 25.03.2012, 17:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2011
Beiträge: 18
napoli befindet sich auf einem aufstrebenden Ast
Standard

ich muss mich verbessern, tut mir leid, das elternelement hat width und height 100%, ich korrigiere schnell mein posting.

ziel und zweck ist es b2 unterhalb b1 anzeigen zu lassen, aber es soll nicht über das eltern div hinausragen.
Mit Zitat antworten
  #6 (permalink)  
Alt 25.03.2012, 17:21
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.987
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Wenn #b1 einen Hintergrund hat, der nicht durchsichtig ist, dann kannst du auch einfach #b1 in #b2 packen. Eine andere Lösung ohne JS gibt es nicht, wenn #header seine feste Höhe nicht behalten soll.
Hat #header eine feste, vorher bekannte Höhe, dann kannst du auch den freien Platz für #b2 mit einer serverseitigen Sprache ausrechnen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #7 (permalink)  
Alt 25.03.2012, 17:34
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Sowas würde mit CSS3 gehen,
Code:
height:calc(100% - 200px);
aber da ist die Browserunterstützung noch ungenügend, deshalb wirst du positionieren müssen:
Code:
#header {
	background-color: yellow;
	height: 100%;
	position:relative;
}
#b1 {
	background-color: blue;
	height: 200px;
	position:relative;
	z-index: 2;
}
#b2 {
	background-color: red;
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	left:0;
}
#b2 p{
	padding-top: 200px;
}
In b2 ein p-Element oder was weiß ich und dem ein padding-top verpasst.

Edit manchmal seh ich auch den Wald... @Praktikant, klar, b1 in b2 geht natürlich

Geändert von cebito (25.03.2012 um 17:39 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 25.03.2012, 17:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2011
Beiträge: 18
napoli befindet sich auf einem aufstrebenden Ast
Standard

@ Praktikant und Cebito, vielen dank!

ihr habt 2 Lösungen gefunden, die dem obigen beispiel gerecht werden, ABER wenn man nun die einfarbigen container zu gradient container macht funktionieren eure vorschläge leider nicht mehr, da ja der jeweilige container den anderen überlagert und somit der farbverlauf in der mitte unterbrochen wird.
Mit Zitat antworten
  #9 (permalink)  
Alt 25.03.2012, 17:47
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.987
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Stimmt. Das geht nicht. Aber du kannst ja noch mit JavaScript rechnen. Man kann eben nicht alles haben
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.03.2012, 17:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2011
Beiträge: 18
napoli befindet sich auf einem aufstrebenden Ast
Standard

und ich dachte dass das nicht zuviel verlangt ist


schade dass sogar overflow: hidden da nicht hilft.

EDIT: mal etwas vom ursprungposting abgewichen, das hier wird also ohne images nicht machbar sein?


Geändert von napoli (25.03.2012 um 17:58 Uhr)
Mit Zitat antworten
Sponsored Links
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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:14 Uhr.