Div in Div 100% Höhe geht nicht

[moritzmoritzz]

Hallo,

habe folgenden Code:

<div id="content-wrapper">
				<div id="header">
					
				</div>
				<div id="content">
					<div class="home-content-box">
							<div class="home-content-split">
								<div class="home-content-left">
									<div class="home-userprofil">
										<!-- Wenn ein Bild vorhanden, dann wird es geladen, ansonsten nicht! -->
									</div>
									<span class="home-username">moritzmoritz</span>
								</div>
								<div class="home-content-right ">
							<!-- Addnews -->
							<span class="start-title status-icon">Was gibt's Neues bei dir?</span>
								<div class="addNews-wrapper">
									<textarea name="addNews" id="addNews" class="home-addnews" placeholder="Schreib etwas... (max. 255 Zeichen)" maxlength="255" value="" ></textarea>
									<div class="send-news">
										<div class="send"></div>senden
									</div>
								</div>
							<!-- End -->
							
							<!-- News -->
							<span class="start-title news-icon">News</span>
							<div class="news-box">
								<div class="news">
									<div class="avatar"></div>
									<span class="news-info">
										moritzmoritz schrieb am 04.06.2013 | 18:01:</span>
									</span>
									<span class="news-text">
										sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
									</span>
								</div>
							</div>
							<!-- End -->
							
							<!-- Straihgt-world News -->
							<span class="start-title news-icon news-sw">Straight-World News</span>
								<div class="news-box sw">
								ss
								</div>
							<!-- End -->
							
							<!-- Straihgt-world News -->
							<span class="start-title news-icon news-sw">Tägliche Aufgaben</span>
								<div class="news-box sw">
								ss
								</div>
							<!-- End -->
							
									
								</div>
								<div class="clear"></div>
							</div>
						</div>				</div>
				<div id="footer">
				
				</div>
			</div>

#content-wrapper {
	padding: 253px 0px 56px 0px; 
	
	position:absolute; 
	top:0; 
	bottom:0; 
	left:0; 
	right:0;
}

#content-wrapper #content {
	width: 738px;
	min-height: 100%;
    
    background: #35889e;
    border: 4px solid #075b77;
    border-top: 0px;
    
    margin: 0 auto;
    	
    padding: 10px;
    overflow: auto;
}

#content-wrapper #header {
	margin-top:-253px; 
	height:253px; 
	background-color:red;
	
	
}

#content-wrapper #footer {
	margin-bottom:-32px; 
	height:32px; 
	background-color:green;
}


/* Box die Gelb ist */

.home-content-box {
	width: 718px;
	height: 100%;
	position: relative;
	
	
	background: yellow;
	border-top-left-radius: 12px;
	-moz-border-top-left-radius: 12px;
	-webkit-border-top-left-radius: 12px;
	
	border-top-right-radius: 12px;
	-moz-border-top-right-radius: 12px;
	-webkit-border-top-right-radius: 12px;
	
	
	
}	

.home-content-box .home-content-split {
	width: 533px;	
	height: 100%;
	

	margin-left: 185px;
}	

.home-content-box .home-content-split .home-content-left {
	width: 185px;
	
	margin-left: -185px;
	float: left;
}

.home-content-box .home-content-split .home-content-left .home-userprofil {
	width: 67px;
	height: 51px;
	
	background:url('images/icons/user_profil.png');
	
	margin-top: 38px;
	margin-left: 48px;

}

.home-username {
	margin-top: 5px;
	margin-left: 48px;
	display: block;
}
.home-content-box .home-content-split .home-content-right {
	width: 533px;
	background: #eee9dc;
	
	border-top-right-radius: 12px;
	-moz-border-top-right-radius: 12px;
	-webkit-border-top-right-radius: 12px;
	
	float: right;
}	

/* clear */

.clear {
	clear: both;
}

Aktuelle sieht es so aus:



Meine Frage.
Wie kriege ich den gelben Div auf 100% Höhe (Inklusive den beiden floated divs innerhalb des Divs).. Irgendwo scheint mir ein Denkfehler unterlaufen zu sein.

Moritz

 

[Jan-Frederik Stieler]

Hi,
das geht nur indem du das DIV#content auf display: table und dein #home-content-box auf display: table-cell stellst.
In dieser konstruktion wird dir aber dein #home-content-split Ärger machen wenn du es auch auf display:table-cell stellst. Da musst du mal schauen wie du das lösen kannst, hab da grad keine Idee.

Ansonsten gibt es noch die Faux-Column-Methode oder eben die Höhe per Javascript berechnen oder du probierst das mal aus: http://www.mediaevent.de/tutorial/positionieren2.html

Viele Grüße

 

[moritzmoritzz]

Javascript hat aber nicht jeder aktiviert ... und somit sieht es dann unschön aus, wenn ein User ohne Javascript die Seite besucht.

Table-cell habe ich auch schon überlegt, aber finde das irgendwie "unschön".

Danke für den Link, werde da mal drüber schauen.

 

[Rainve]

Guten Tag!

Vorerst mal kurz etwas zu JS:

Seiten so zu entwickeln dass diese auch ohne JS gleich aussehen/funktionieren als wie mit JS ist Schwachsinn. Kein normaler Besucher hat JS deaktiviert bzw. hat jemals etwas von JS gehört. Wenn man Pech hat ist vl. jeder 2000 Besucher ein Nutzer ohne JS und dies ist meiner Meinung nach zu vernachlässigen. Allerdings sollte man soweit wie möglich auf JS verzichten wenn dies sowieso auch nur mit CSS(viel schneller) umzusetzen ist. Lediglich Elemente bezüglich der Sicherheit(Benutzidentifizierung) oder z.B. die Validierung von Benutzereingaben sollten mit JS gar nicht bzw. nur optional erfolgen da man dies ja ausstellen kann und es ansonsten vorkommen kann dass man schnell einmal einige wenige 1000 Einträge von irgendwelchen Spambots in seinem Gästebuch hat.

Zu deinem eigendlichen Problem:

Lade doch bitte mal deine 2 kompletten Dateien hoch und nicht nur die Ausschnitte aus deinem Code. Wenn ich deine 2 Codeausschnitte miteinander verbinde ist der gelb DIV auf 100%.

Mit freundlichen Grüßen,
Christoph WERNER