✔ Div mit 100% width und height

S

socke999

Erfahrenes Mitglied
Hi,
ich sitz da jetzt schon länger an einem Prolem, dass ich eignetlich dachte recht schnell gelöst zu bekommen. Leider bislang ohne erfolg.

Eigentlich will ich nur so 2 DIV's untereinander platzieren, so dass diese die gesamte Breite und Höhe des Browserfensters ausfüllen.

Also eigentlich nur so was:

HTML: 
<div id="navigation">NAV DIV</div>
<div id="container">CONTAINER DIV</div>

und zwar wollte ich dass #navigation höhe von 30 px hat. und der #container dann das restliche BrowserFenster ausfüllt.
Hab mir das mal so vorgestellt:

Code: 
#navigation
{
    width: 100%;
    height: 30px;
}


#container
{
    width: 100%;
    height: 100%
}

jedoch klappt dass nicht so ganz wie ich mir das vorgestellt hatte



Noch eine weitere Frage. Wenn ich in CSS z.B. width als 100% angebe, wie kann ich dann einen boder 1px solid machen, ohne dass die div dann insgesamt größer als 100 % ist. Denn wenn ich das so normal angebe, dann ist ja das element insgesamt 100 % + 1px border pro Seite breit .... Gewünscht wäre aber dass er inklusive Border 100% breit ist...
 
Hi,

das kann so auch nicht funktionieren, da sich die deklarierte height:100%-Eigenschaft für #container immer auf die gesamte Fensterhöhe bezieht, und sich somit der Block um das Höhenmaß des vorangegangenen Elements über den unteren Fensterrand hinaus erstreckt - die Seite kann somit gescrollt werden, obwohl noch kein entsprechender Inhaltsumfang vorliegt.

Desweiteren ist je nach Doctype-Deklaration folgende Regel vonnöten, um den Block überhaupt in seiner Höhe strecken zu können:
CSS: 
html,body { height:100%; }

In deinem Fall käme beispielsweise eine absolute Positionierung der Blöcke in Betracht, bei der der untere Block die Angaben top:30px und bottom:0 erhält.

Siehe zu dieser CSS-Positionierungstechnik z.B. dieses Layout-Beispiel http://www.cssplay.co.uk/layouts/fixit.html, in dem du dir den Footer-Bereich wegdenkst ;-)

Die zweite Möglichkeit besteht darin, die beiden Blöcke zu verschachteln:
HTML: 
<div id="container">
    <div id="navigation">NAV DIV</div>
    CONTAINER DIV
</div>

sodass das Elternelement #container den Viewport in voller Höhe ausfüllt. Der Navi-Bereich würde einen Hintergrund erhalten, der den des Elternelements verdeckt. Nähere Beispiele hierzu kannst du dem zweitgenannten Tutorial in meiner Signatur entnehmen.

Zu deiner zweiten Frage: Ein Block-Element besitzt von sich aus schon die Eigenschaft width:100%. Entfällt diese Angabe im CSS, wird die Rahmenstärke auch nicht mehr gemäß dem Box-Modell hinzuaddiert.

mfg Maik
 
Danke für die schnelle antwort!

Ja, also das mit dem Verschachteteln hab ich so schon hinbekommen, aber das ist nicht so wünschenswert....
Den CSS code html,body { height:100%; } hatte ich auch schon drinnen (habs vergessen oben hinzuschreiben)

Ja mit den absolute würde so funktionieren:

Nur, ich möchte dann so was machen, dass Elemente in dem Container innerhalb des #containers frei verschiebbar sein sollen. jetzt bin ich mir da nicht so sicher, ob das mit absolute noch funktioniert ... Sollte eigentlich schon ... aber bin da nicht so experte im CSS
 
socke999 hat gesagt.:
Nur, ich möchte dann so was machen, dass Elemente in dem Container innerhalb des #containers frei verschiebbar sein sollen. jetzt bin ich mir da nicht so sicher, ob das mit absolute noch funktioniert ... Sollte eigentlich schon ... aber bin da nicht so experte im CSS
Zum Vergrößern anklicken....
Wüsste jetzt auf Anhieb nicht, was dafür hinderlich sein soll.

mfg Maik
 
Div mit 100% höhe des Parent - Div

Hallo,
also irgendwie bin ich bei den Div's und height noch nicht so im Bilde.

Also ich habe so einen #mainContainer - Div, die soll 100 % height und 100 % width haben. Also das Browserfenster ohne Scrollbalken ausfüllen.

Soweit habe ich das auch geschafft.

Dann habe ich im #mainContainer eine menüleiste mit der id #topbar, die eine höhe von 30 px hat. Soweit auch alles klar.


Jetzt kommt aber der punkt wo ich nicht weiter komme.

unter der #topbar soll jetzt eine #windowContainer sein, der jetzt den REST zu 100 % höhe und breite ausfüllt.

HTML: 
 <div id="mainContainer">
        
        
        	<div id="topbar" class="topbarColor">
                        irgend ein Menü
        	</div>
       	
        
            <div id="windowContainer">
                   irgend ein Inhalt
            </div>
        
        
 </div>


Die CSS habe ich so definiert:
Code: 
body
{
	padding:0;
	margin:0;
	
	min-height:100%;
    height:auto !important;
    height:100%;

}


#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;



#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;
}

Also so wie es jetzt definiert ist, ist #windowContainer so hoch wie das Browserfenster. Da oberhalb von #windowContainer noch die #topbar (height:30px)) ist, ist dann der #windowContainer um 30px zu "hoch", dass es zu ScrollLeisten kommt, die ich eigneltich nicht haben will.

Also mit CSS3 soll ja dann so etwas geben wie height: 100% - 30px; für #windowContainer.

Nur wie mach ich das jetzt?
Hat da jemand eine Idee?
 
Danke für die antworten.

Entschuldige Maik, dachte das wäre so etwas übersichtlicher als neues Thema. Tut mir leid, für die Zukunft weis ich es.

Was den Tipp mit dem overflow:hidden betrifft: Das funktioniert schon, aber ich hab da später irgendwelche Objekte die ich mit JavaScript verschieben kann und da habe ich jetzt ein bisschen angst, dass ich dann diese objekte "unterhalb des Sichtbaren Bereiches" schieben kann, da der ja nur "hidden" ist, aber denoch die größe hat.

Gibt es da nicht eine andere möglichkeit?
 
Übersichtlichkeit hin oder her, die Frage hast du hier vor ca. drei Wochen gestellt, und beantwortet bekommen. Von daher versteh ich nicht, wieso du sie heute (in einem neuen Thema) wieder stellst.

Andere Möglichkeit? Nicht, dass ich wüßte.

Was stört dich an den beiden möglichen Lösungsansätzen?

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück