div height:100% des bildschirms

spacle · 19.01.2011

ja also ich hab nen kleines problem

Code:

/*------------------------ Wrapper------------------------------------------------------------*/
div#wrapper 
{
	background:url(Bilder/bg-content1.gif);
	width:1141px;
	min-height:312px;
	margin:auto;
	position:relative;
}
/*------------------------ Header------------------------------------------------------------*/
div#wrapper div#header 
{
	background:url(Bilder/Header.png);
	position:relative;
	margin:auto;
	width:864px;
	height:223px;
		border-right:#96968f solid 1px;
}
/*------------------------ Content------------------------------------------------------------*/
div#wrapper div#contentContainer 
{
	margin:auto;
	position:relative;
	width:863px;
	min-height:312px;
		border-right:#96968f solid 1px;
	border-left:#96968f solid 1px;
}

div#wrapper div#contentContainer div#Content 
{
	position:absolute;
	left:220px;
	top:0;
	height:312px;
	width:625px;
	padding-left:10px;
	padding-top:4px;
}

mein wrapper hat einen netten verlauf, das hintergrundbild soll sich auf der y achse nach unten ins unendliche kopieren (wohin auch sonst, dass hintergrundbild is so groß wie mein div), ohne dass da ein scrollbalken auftaucht
height:100%; funktioniert nicht o_O

Zampano_ · 19.01.2011

AW: div height:100% des bildschirms

Ich ersteh dein problem nicht ganz. Wenn das HG-Bild doch so groß ist wie das div, warum sollte sich das dann wiederholen.
Evntl. postest du auch mal den html-code

Myhar · 19.01.2011

AW: div height:100% des bildschirms

Ein Screenshot wäre vielleicht noch hilfreich, damit man genauer nachvollziehen kann, was du meinst.
Ein Hintergrundbild kannst du mit background-repeat wiederholen lassen

Code:

background-repeat: repeat-x repeat-y;
Kurzschreibweise:
background: url(dateipfad) [B]repeat-x[/B] [B]repeat-y[/B] left top [...];

wiederholen lassen (x und y stehen hier für horizontal-vertikal)
Was ich nicht verstehe ist, wie du da bei einem einfachen Hintergrundbild überhaupt eine Scrollbar bekommst?
LG

spacle · 19.01.2011

AW: div height:100% des bildschirms

das hintergrundbild soll sich auf der y achse wiederholen. es soll den ganzen bildschirm des betrachters eingeben. von der breite her is das hintergrundbild so groß wie das div. die höhe des bildes beträgt 2px ^^ screen folgt

Zampano_ · 19.01.2011

AW: div height:100% des bildschirms

Wenn du einem div 100% gibst, scaliert sich das Dingen nicht auf die gesamte Bildschirmhöhe, sondern auf die Größe seines Elternelements. (Wenns der Wrapper ist dann ist das wohl der body)
Es könnte helfen wenn du dem body vorher auch height 100% zuweist. Dem Wrapper gibst du dann min-height:100%!

spacle · 19.01.2011

AW: div height:100% des bildschirms

ok screen geht nich so gut, statdessen hier die einfachste erklärung:

das div soll genau so hoch sein wie der bildschirm der person, die die seite aufruft
und das mit dem body hat nich geklappt

Myhar · 19.01.2011

AW: div height:100% des bildschirms

Wieso soll der Wrapper genau gleich hoch sein wie der Bildschirm?
Und warum gibst du das Hintergrundbild nicht einfach auf den <body> Tag?

spacle · 19.01.2011

AW: div height:100% des bildschirms

ok, ich merke ihr versteht nicht, was ich möchte, daher habe ich es jetzt so gelöst:

Code:

body 
{
	background:#FFF center url(Bilder/bg-content1.gif) repeat-y;

*hust* ich wollte es zwar eigentlich anders haben, aaaber so gehts auch ^^ wahrscheinlich versteht ihr es nich, weil man es normalerweise anders realsiert

Pixelverwender · 19.01.2011

AW: div height:100% des bildschirms

Was soll das für einen Sinn machen?
Entweder Du hast die Seite voll mit Inhalten, dann muss der Besucher sowieso scrollen, oder Du hast weniger Inhalte, dann ist es auch egal.
Und das Hintergrundbild sollte dem <body>-Tag zugewiesen werden..

Edit: War wohl zu langsam mit Schreiben

Zampano_ · 19.01.2011

html, body {

margin: 0;
padding: 0;
height: 100%;
}

#wrapper {
min-height: 100%;/* Mindesthöhe für moderne Browser */
height:auto !important /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE
}

Das funktioniert bei mir sowohl im IE, als auch im Mozi

Ach so - Sinn macht das natürlich nur, wenn der wrapper dann schmaler als der body ist

spacle · 19.01.2011

AW: div height:100% des bildschirms

und ob der wrapper schmaler ist als der boddy^^ ich wollt dann aber doch nochmal nachfragen: wozu brauchst du das important? height sind im body und im wrapper identisch, die restlichen elemente des wrappers kommen im body nicht vor, also was willst du ersetzen? außerdem is das important in der konstellation unnötig, weil die browser eh von oben nach unten lesen min-height gibt an wie groß der wrapper mindestens ist, er kann aber durch mehr inhalt erweitert werden, das is bei 100% doch schwachsinn^^ was bleibt is in beiden elementen height 100%, was ich schon erfolglos probiert habe. verstehe ich da was falsch?

Herr_D · 19.01.2011

AW: div height:100% des bildschirms

spacle schrieb:
und ob der wrapper schmaler ist als der boddy^^ ich wollt dann aber doch nochmal nachfragen: wozu brauchst du das important? height sind im body und im wrapper identisch, die restlichen elemente des wrappers kommen im body nicht vor, also was willst du ersetzen? außerdem is das important in der konstellation unnötig, weil die browser eh von oben nach unten lesen min-height gibt an wie groß der wrapper mindestens ist, er kann aber durch mehr inhalt erweitert werden, das is bei 100% doch schwachsinn^^ was bleibt is in beiden elementen height 100%, was ich schon erfolglos probiert habe. verstehe ich da was falsch?

Ganz locker...

Das important brauchst du für moderne Browser. es setzt das height:100% was danach kommt außer Kraft, das wiederum brauchst du nur für IE, der zwar min-height nicht versteht, aber height:100% automatisch verlängert... Ägypten? Ist aber so...

Wobei das auch mit

Code:

min-height:100%;
*height:100%;

zu lösen wäre...

spacle · 19.01.2011

AW: div height:100% des bildschirms

ok... ich habs verstanden, naja warum, nur nich warum xDD weiss jetzt auf jeden fall was zu tun ist, danke an dieser stelle; nochmal zu was anderem, ein zweites problem ist aufgetreten, als ich versucht habe, mehr inhalt rein zu packen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="wrapper"> 						<!-- Anfang: Wrapper -->
    
    	<div id="header">						<!-- Anfang: Header -->
        </div>									<!-- Ende: Header -->
        
        <div id="contentContainer">				<!-- Anfang: Contentcontainer -->
                   
                    <div id="Content">					<!-- Anfang:Content -->
            	
                <p text align="justify">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
                </p>
                	
            </div>								<!-- Ende: Content -->
            
        	<div id="navigation">					<!-- Anfang: Navigation -->
            	
                <a href="#" class="Link"></a>
                <a href="#" class="Link"></a>
<a href="#" class="Link"></a>
<a href="#" class="Link"></a>
<a href="#" class="Link"></a>
<a href="#" class="Link"></a>
<a href="#" class="Link"></a>
<a href="#" class="Link"></a>

                    </div>
            </div>			
</body>

</html>						<!-- Ende: Navigation -->

das war html, jetzt kommt css

Code:

/*----------------------------------------------------- Design ------------------------------------------------------------*/
/*------------------------ Wrapper------------------------------------------------------------*/
div#wrapper 
{
	background:url(Bilder/bg-wrapper.gif) no-repeat; width:1141px; margin:auto; position:relative;
}
/*------------------------ Header------------------------------------------------------------*/
div#wrapper div#header 
{
	background:url(Bilder/Header.png); position:relative; margin:auto; width:864px; height:222px;
		/** border-right:#96968f solid 1px;**/
}
div#wrapper div#contentContainer 
{
	margin:auto; position:relative; width:863px; border-right:#96968f solid 1px; border-left:#96968f solid 1px; border-bottom:#96968f solid 1px; 
}

div#wrapper div#contentContainer div#navigation 
{
	background:url(Bilder/bg-navi1.jpg); position:relative; left:0px; top:0;  width:220px; min-height:312px;
}

div#wrapper div#contentContainer div#Content 
{
	position:absolute; left:220px; top:0; width:625px; padding-left:10px; padding-top:4px;
}
.text {
		font-size:1.2em; color:#555555; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; line-height:21px;
}
.textklein {
		font-size:1em; color:#555555; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.textch {
		font-size:1em; color:#555555; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; float:right;
}
.textklein a 
{
	color:#29630b; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

.textklein a:hover
{
	color:#29630b; text-decoration:underline; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

body 
{
	background:#FFF center url(Bilder/bg-content1.gif) repeat-y;
	
}

das problem was auftritt: der text geht über den rand meines content bereiches, anstatt den content bereich zu verlängern

sokie · 19.01.2011

AW: div height:100% des bildschirms

dein #content kann die höhe des #contentContainer s nicht beeienflussen, weil er durch position:absolute aus dem dokumentenfluss genommen ist. Also den #content nicht absolute positionieren

spacle · 19.01.2011

AW: div height:100% des bildschirms

wie dann? ich habe ja links noch die navi

cebito · 19.01.2011

AW: div height:100% des bildschirms

spacle schrieb:
das problem was auftritt: der text geht über den rand meines content bereiches, anstatt den content bereich zu verlängern

uups, sokie war schneller.

Trotzdem - dein Wrapper ist nicht geschlossen. Und wie schon gesagt, der absolut positionierte content hat keinen Einfluß mehr auf die Höhe des Elternelements.
Die navi und den content kannst du floaten.

spacle · 19.01.2011

AW: div height:100% des bildschirms

bahnhof? xD ich hab mich schon mit vielem beschäftigt, nur mit floaten nich.
hilfe bitte, danke im vorraus

ok, ich hasse den float befehl :lol:
ich habe deom content bereich jetzt position relative gegeben und die navigation aus dem dokumentenfluss entfernt indem ich sie nun absolut positioniert habe. das klappt nur, weil mein content länger ist, als meine navigation. aber wäre es nicht so, wäre es glaube ich auch ziemlich bedenklich, in diesem fall wäre ein anker prinzip wie in wikipedia wohl die bessere lösung. auf der startseite ist dennoch wenig text, aber es passt jetzt alles, wollte nur über die lösung, die ich gefunden habe informieren^^

sind denn alle jungle camp gucken oder warum antwortet keiner mehr ? xD

sokie · 19.01.2011

AW: div height:100% des bildschirms

spacle schrieb:
ok, ich hasse den float befehl

Vielleicht verständlich - sollte dich aber nicht davon abbringen ihn zu benutzen*g*
wenn zwei behälter nebeneinander angeordnet sein sollen kannst du das zB mit float:left lösen, wenn die Summe ihrer Breiten (jeweils width + paddings+margins) nicht die breite des umschliessenden Elements überschreitet.
Anschliesend muss mit einem anschliessenden Blockelement "gecleared" werden (zb. clear: both).

HTML:

<div id="contentContainer">
  <div id="navi"></div>
  <div id="content"></div>
  <div class="clearfix"></div><!--hier ein div ohne inhalt-->
</div>

Code:

#navi{
  width: breite;
  float: left;
}
#content{
  width: breite;
  float: left;
}
.clearfix{
  clear: both; /*clear:left; würde hier auch reichen, da nur links gefloatet wird*/
}

ein bisschen theorie:

spacle · 20.01.2011

AW: div height:100% des bildschirms

würde das auch das ruckeln bei mehr inhalt nehmen?
edit: nein, tut es nich o_O

wisst ihr, wodurch es kommen kann, dass sich das ganze layout nen stück nach rechts oder links verschiebt, wenn man ein bisschen mehr inhalt rein tut?

Herr_D · 20.01.2011

AW: div height:100% des bildschirms

spacle schrieb:
würde das auch das ruckeln bei mehr inhalt nehmen?
edit: nein, tut es nich

wisst ihr, wodurch es kommen kann, dass sich das ganze layout nen stück nach rechts oder links verschiebt, wenn man ein bisschen mehr inhalt rein tut?

Ja das kommt davon, dass moderne Browser keine Scrolleiste anzeigen, wenn sie nicht gebraucht wird...

setzt mal in die CSS vom Body

Code:

body {
overflow-y:scroll; /* Höhe */
overflow-x:auto; /* Breite */
/* Weitere Werte */
}

Dann ist immer ein Scrollbalken da (wie im IE)