✔ Div mit 100% width und height

welche beiden lösungsansätz?

1) overflow: hidden; optisch passt es, aber wie schon gesagt, wegen den Verschieben der Objekte. Das werd ich dann aber schon noch sehen...
2) ?
 
achso, die verschachtelte variante kann ich so nicht ganz genau übernehmen,
da ich sonst objekte über die #topbar (navigationsbar) schieben kann und dass will ich nicht. deshalb brauche ich noch so einen weiteren container, den #windowContainer. Den nur da drinnen sollen die Objekte verschoben werden können
 
Wenn für diesen Anwendungsfall die erstgenannte Möglichkeit der absoluten Positionierung der beiden Blöcke nicht prädestiniert ist, dann weiß ich es auch nicht.

Mein damals empfohlenes Beispiel kannst du ja mal dem Probelauf unterziehen, ob sich die Objekte vom mittleren DIV heraus über das obere oder untere hinweg verschieben lassen.

mfg Maik
 
ja das absoulte Positionierung mach ich ja im prinzip ja schon so ähnlich.


Man könnte halt die #mainContainer weglassen und positioniere die #topbar (height: 30px) oben, und beginne mit dem #windowContainer bei top:30px;

HTML: 
<body>
    	<div id="topbar" class="topbarColor">
              irgend ein Menü
        </div>
       	
        
        <div id="windowContainer" style="top:30px;">
                  irgend ein Content
        </div> 
</body>

Ich denke aber, ich tendiere dazu das ganze noch in einem #mainContainer zu verpacken, dann kann ich den ganzen #mainContainer auf einmal einblenden bzw. ausblenden. Zumbeispiel für Ajax oder Bilder laden. dann kann ich einmal eine #loading Div anzeigen, und dann wieder den #mainContainer



------------------------------------------------------------------------------------------------------------------------------------

Also das mit dem overflow:hidden; funktioniert doch nicht so ganz, denn ich kann ein objekt im #windowContainer um genau diese 30px weiter nach unten schieben.

Geht das irgendwie anders zu machen, also das #windowContainer tatsächlich nur die gewünschte größe hat?
 
Zuletzt bearbeitet:
socke999 hat gesagt.:
Also das mit dem overflow:hidden; funktioniert doch nicht so ganz, denn ich kann ein objekt im #windowContainer um genau diese 30px weiter nach unten schieben.

Geht das irgendwie anders zu machen, also das #windowContainer tatsächlich nur die gewünschte größe hat?
Zum Vergrößern anklicken....
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <meta name="author" content="Maik" />
        <meta name="date" content="2010-07-13" />
        <title>tutorials.de | Div mit 100% width und height</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="topbar">topbar</div>
        <div id="windowContainer">windowContainer</div>
    </body>
</html>
CSS: 
body {
margin:0;
padding:0;
height:100%;
max-height:100%;
overflow:hidden;
}
#topbar {
position:absolute;
top:0;
left:0;
width:100%;
height:30px;
background:#eee;
}
#windowContainer {
position:absolute;
top:30px;
bottom:0;
left:0;
width:100%;
overflow:auto; /* sofern das Scrollen erwünscht ist, ansonsten overflow:hidden  */
background:#ddd;
}

Fertitsch ;-)

mfg Maik
 
Ich verstehe nicht wie sich bei der absoluten Positionierung Elemente über deine Topbar schieben sollen...
Ich arbeite gerade an einem Layout ähnlich dem deinen...
LeftBar - TopBar- Content

Ich arbeite ebenfalls mit verschachtelten divs und absoluter Positionierung...
Es funktioniert einwandfrei!

Noch ein guter Tipp: Lad dir Firebug runter und mach dich mit seiner Anwendung vertraut.
Denn overflow:hidden bedeutet nicht, dass das Element in seiner Originalgröße in dem
von dir definierten Bereich einfach nur versteckt wird, sondern es heißt, dass wenn ein Inhalt ÜBER den
von dir definierten Bereich hinaus geht, er scrollbar IM SELBEN vordefinierten Bereich anzeigbar gemacht wird.
Firebug verdeutlicht dies.
 
Bexx hat gesagt.:
... Denn overflow:hidden bedeutet nicht, dass das Element in seiner Originalgröße in dem von dir definierten Bereich einfach nur versteckt wird, sondern es heißt, dass wenn ein Inhalt ÜBER den
von dir definierten Bereich hinaus geht, er scrollbar IM SELBEN vordefinierten Bereich anzeigbar gemacht wird. ...
Zum Vergrößern anklicken....
Hallo,
das war bei mir bisher anders und ich glaube auch nicht, dass sich daran plötzlich was geändert hat:
http://de.selfhtml.org/css/eigenschaften/anzeige/overflow.htm
 
Danke für die Hilfe und Tipps:

Besonderen Dank natürlich dir Maik, dein Code funktioniert so wunderbar, wobei ich nicht verstanden habe wieso ich bei ähnlichen CSS Code noch so einen mainContainer (mit nochmals overflow:hidden neben den body) drum herum gebraucht habe.

ich hätte das so:
Code: 
body
{
	padding:0;
	margin:0;
	
	min-height:100%;
    height:auto !important;
    height:100%;
	overflow:hidden;

}


#mainContainer
{
	width:100%;
	height:100%;

	border:none;
	min-height:100%;
    height:auto !important; /* Für normale Browser */
    height:100%; /* Für IE */
	position:absolute;
	
	background-color:#FF9;
	overflow:hidden;

}



#topbar
{
	border:none;
	top:0px; 
	left:0px;
	width:100%;
	height:30px;
}


#windowContainer
{
	width:100%;
	height:100%;

	border:none;
	min-height:100%;
    height:auto !important; /* Für normale Browser */
    height:100%; /* Für IE */
	position:absolute;
	
	background-color:#0CF;
}
HTML: 
<div id="mainContainer">
        	<div id="topbar" class="topbarColor">
                 topbar
        	</div>
       	
        	<div id="windowContainer" style="top:30px;">
            	
                              	<div id="verSchiebbaresObjekt">irgend ein objekt das verschoben werden kann</div>
            
            </div>
        
 </div>


und da habe ich diesen mainContainer gebraucht, ansonsten habe ich folgendes machen können:

1) Man sieht keine scrollbar im Browser, alles sieht aus als obs mit 100 % passen würde.
2) wenn ich aber nun mein objekt ganz ans ende des browserfenster schiebe, dann kann ichs plötzlich doch um diese 30px weiter runter schieben und es kommt eine Scrollbar. Das konnte ich nur beheben indem ich die body overflow:hidden und mainContainer overflow:hidden gesetzt habe. dann hats aber funktioniert.


Dein Code ist aber viel sauberer Maik, darf ich ihn so übernehmen?



Bexx: in dem Fall wo mans über die Topbar schieben kann, war auf eine andere Lösungsvariante bezogen, also in dem fall wo die #topbar im #windowContainer wäre:
also so ca.

HTML: 
<div id="windowContainer">
  <div id="topbar">topbar</div>
            	
       <div id="verschiebbaresObjekt">verschieben</div>
 
 </div>

Da man #verschiebbaresObjekt im ganzen #windowContainer herumschieben kann, könnte man es über oder unter (z-index) die #topbar schieben. Firebug kenn ich natürlich schon, aber danke für den Tipp ;)


Vielen Dank nochmals an alle!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück