✔ CSS-Layer height:100%; (funktioniert nicht)

Fabian Frank · 21. März 2008

Grüß euch,

habe mal wieder ein Problem mit einem Div-Layer.
Und zwar möchte ich in einem Divlayer mit einem weißem Hintergrund Newseinträge erscheinen lassen.
Leider klappt das mit der Angabe height: 100%; nicht.

Gibt es eine andere Möglichkeit, den Layer an die Menge des "Inhalts" anzupassen?

Viele Grüße,

Fabian

Maik · 21. März 2008

Hi,

das sind aber nicht gerade viele Infos, die du da preisgibst, also kann ich jetzt für's erste nur spekulieren, dass das HTML-Dokument im standardkonformen Modus übergeben wird, und somit folgende erforderliche CSS-Regel im Stylesheet fehlt, damit die Box auf die Fensterhöhe gestreckt wird:

Code:

html,body {
height:100%;
margin:0;
padding:0;
}

Sollte dem nicht so sein bzw. mein Vorschlag nicht weiterhelfen, solltest du hier den HTML- und CSS-Code zeigen, um weiteren Mißverständnissen vorzubeugen und einen sachdienlichen Hinweis zu erhalten.

Fabian Frank · 21. März 2008

hm, sry.
Hab mal schnell nen Screenshot gemacht (siehe Anhang.)

Hab das mit deinem Code versucht geht nicht. Der weiße bereich geht nie bis zum Bildschirmrand...

Maik · 21. März 2008

Maik hat gesagt.:
Sollte dem nicht so sein bzw. mein Vorschlag nicht weiterhelfen, solltest du hier den HTML- und CSS-Code zeigen, um weiteren Mißverständnissen vorzubeugen und einen sachdienlichen Hinweis zu erhalten.

Der HTML- und CSS-Code der Seite wäre jetzt sicherlich aufschlussreicher, als der Screenshot.

Fabian Frank · 21. März 2008

sry, steh grad voll aufm Schlauch.

Hab den satz wohl überlesen..

Hier die CSS-Datei:

Code:

/* Background */
#background {
	position: absolute;
	width: 286px;
	height: 100px;
	z-index: 10;
	left:50%;
	margin-left:-407px;
	top:43px;
}

/* navigation */
#navigation {
	position: absolute;
	width: 736px;
	height: 25px;
	z-index: 101;
	left:50%;
	margin-left:-375px;
	top:250px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size: 10px;
	text-align: right;
	line-height: 17px;
	background-color: #ffffff;
}

/* content */	
#content {
	position: absolute;
	width: 736px;
	height: 100%;
	z-index: 100;
	left:50%;
	top: 250px;
	bottom: 0px;
	margin:0;
padding:0;
	margin-left:-375px;
	background-color: #ffffff;
	padding: 10px;
}

/* player */	
#player {
	position: absolute;
	width: 0px;
	height: 2px;
	z-index: 101;
	left:50%;
	top: 250px;
	margin-left:90px;
	padding: 10px;
}
html,body {
height:100%;
margin:0;
padding:0;
}

Der Content ist nur so aufgebaut:

Code:

<div id="content">Hier die Newseinträge</div>

EDIT: Oh man, hier noch die andere Stylesheet-datei

Code:

/* Page */
body {
	background-color: #000000;
}

/* Text */
.text {
	font-family : verdana;
	font-size : 11px;
	color : #323232;
	font-weight : normal;
	padding-top: 5px;
	line-height: 2;
}

.textBottom {
	font-family : arial;
	font-size : 10px;
	color : #7d8286;
	font-weight : normal;
	padding-top: 5px;
	line-height: 2;
	text-transform: uppercase;
}

.topic {
	font-family: Lucida Sans;
	color : #11497e;
	font-weight : bold;
	font-size : 14px;
		border-bottom: 1px #c2c2c2  dotted;
}

.datum {
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 9px;
	font-weight : normal;
	color: #c2c2c2;
	padding-bottom: 2px;
	border-bottom: 1px #c2c2c2  dotted;
	padding-top: 2px;
	border-top: 1px #c2c2c2 dotted;
	font-style: italic;
}
.navi {
word-spacing: 2px;
}

/* Links */
.navigation-links {
	font-family: verdana;
	font-size: 10px;
	text-transform: lowercase;
	line-height: 2.6em;
	margin-left: 13px;
	color: #000000;
	padding-bottom: 1px;
	padding-top: 4px;
	padding-left: 1px;
	padding-right: 1px;
		text-decoration: none;
	
}
.navigation-links:hover {
	color: #c9cccf;
	text-decoration: none;
}
.link {
	font-family : verdana;
	color : #848484;
	font-size : 10px;
	text-decoration: none;
	border-bottom: 1px #848484 dotted;
}
.link:hover {
	color : #ffffff;
	border-bottom: 1px #ffffff solid;
}
.bottomLink {
	font-family : arial;
	color : #7d8286;
	font-size : 10px;
	text-decoration: none;
	text-transform: uppercase;
}
.bottomLink:hover {
	color: #000000;
	text-decoration: none;
}

Maik · 21. März 2008

So, zur Abwechslung hänge ich jetzt hier mal einen Screenshot an, der sich zu deinem in allen Punkten widerspricht :suspekt:

Wenn du hier noch weitere Stylesheets nachreichst, solltest du auch den vollständigen HTML-Code deiner Seite zeigen, denn wie du siehst, wird das DIV bei mir 250px von oben positioniert und auf eine 100%-Höhe gestreckt, die in den unteren Bereich des Fensters verschwindet, was man deutlich am vertikalen Scrollbalken erkennen kann.

Fabian Frank · 21. März 2008

Tut mir leid, dass hier im Moment alles auf Missverständnissen beruht...

HTML:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fabifrank</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="design.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="background"></div>
<div id="navigation">fabifrank.de<a href="index.php" class="navigation-links"><span class="dot">.</span>news</a>&nbsp;<a href="shows.php" class="navigation-links"><span class="dot">.</span>shows</a>&nbsp;<a href="audio.php" class="navigation-links"><span class="dot">.</span>audio</a>&nbsp;<a href="fotos.php" class="navigation-links"><span class="dot">.</span>fotos</a>&nbsp;<a href="bio.php" class="navigation-links"><span class="dot">.</span>bio</a>&nbsp;<a href="gear.php" class="navigation-links"><span class="dot">.</span>gear</a>&nbsp;<a href="kontakt.php" class="navigation-links"><span class="dot">.</span>kontakt</a>&nbsp;<a href="links.php" class="navigation-links"><span class="dot">.</span>links</a>&nbsp;</div>
<div id="player"><span class="text"><br /><br />
    <embed src="http://www.jeroenwijering.com/embed/mediaplayer.swf"
	width="270"
	height="220"
	allowscriptaccess="always"
	allowfullscreen="true"
	flashvars="height=220&width=270&file=mp3/solo_2006.mp3&image=img/solo_2006.gif&backcolor=0xffffff&frontcolor=0x000000&lightcolor=0x000000"/></div>
	<div id="content">
	<span class="text"><br /><table width="450" border="0" cellpadding="0" cellspacing="0">

  <tr>

    <td width="497" class="topic"><span class="topic_text">Village-Gig!</span></b></td>
  </tr>
  <tr>
    <td class="text">Hallo Leute,<br /><br />Vorraussichtlich spielt Engine Pulse am Donnerstag im Village.<br />Ist unser erster Gig, in erster Linie wollen wir mal unser "Live-Zusammenspiel" austesten und 2. Ausschau nach Musikern halten.<br /><br />fabi<br /><br /></td>
  </tr>
      <tr>
    <td class="datum">2008/03/08</td>
  </tr>
</table>
<br /><br /><table width="450" border="0" cellpadding="0" cellspacing="0">

  <tr>

    <td width="497" class="topic"><span class="topic_text">Frohes Neues Jahr 2008!</span></b></td>
  </tr>
  <tr>
    <td class="text">Ich wünsch euch allen einen Guten Start ins neue Jahr und vorallem viel Spaß weiterhin am musizieren!<br /><br />Mit Engine Pulse wird momentan eine neue Demo aufgenommen, um hoffentlich noch mehr Interressenten zu wecken.<br />Sind derzeit noch auf der Suche nach dem richtigen Vocalisten + Bassisten...<br /><br /></td>
  </tr>
      <tr>
    <td class="datum">2008/01/01</td>
  </tr>
</table>
<br /><br /><table width="450" border="0" cellpadding="0" cellspacing="0">

  <tr>
    <td width="497" class="topic"><span class="topic_text">Relaunch</span></td>
  </tr>
  <tr>
    <td class="text">Servus, neues Design der Website.<br />Gästebuch und Mediaplayer wurden auch überarbeitet, würde mich freuen, wenn ihr eine Nachricht hinterlassen würdet.<br />greetings<br />Fabi<br /><br /></td>
  </tr>
    <tr>
    <td class="datum">2007/07/04</td>
  </tr>
</table>
<br /><br /><table width="450" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="497" class="topic"><span class="topic_text">Musikmesse Frankfurt</span></td>

  </tr>  
  <tr>

    <td class="text">Nicht grad ein berauschendes Ergebnis, aber durchaus fair.<br>Hab ein Schlagzeug gewonnen, nochmal Danke an die Modernmusicschool und grüße an alle Beteiligten (Aliyar, Fabian, Jan, Michael).<br /><br>Hat auf jeden Fall Spaß gemacht.<br><br>Man sieht sich,<br><br>Greetz<br /><br /></td>
  </tr>
    <tr>
    <td class="datum">2007/04/16</td>
  </tr>
</table></span>
<br /><br /><br />
<table width="400" border="0" cellspacing="0" cellpadding="0" class="textBottom">
  <tr>
  <td style="border-bottom: 1px #bac1c7 solid;"><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.fabifrank.de/design.css" class="bottomLink" target="_blank">CSS 2.1</a>&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;Myspace:&nbsp;&nbsp;<a href="http://www.myspace.com/fabifrank" class="bottomLink" target="_blank">FabiFrank</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.myspace.com/enginepulse" class="bottomLink" target="_blank">Engine Pulse</a></td>
  </tr>
  <tr>
    <td><a href="impressum.php" class="bottomLink">Impressum</a>&nbsp;&nbsp;|&nbsp;&nbsp;&copy; 2008 <font color="#11497e">fabifrank.de</font></td>
  </tr>
</table>
</div>
</body>
</html>

Maik · 22. März 2008

Dann versuch es mal hiermit, denn die height-Eigenschaft wird von den modernen Browsern als fixe Höhe betrachtet, und nur vom IE (fälschlicherweise) als Mindesthöhe behandelt.

Zusätzlich ist hier die Positionsangabe bottom:0 im wahrsten Sinne des Wortes im Wege, denn sie beschneidet ebenfalls in den modernen Browsern das Element in der Höhenausdehnung.

Code:

#content {
        position: absolute;
        width: 736px;
        min-height:100%; /* Mindesthöhe in modernen Browsern */
        height:auto !important; /* !important-Regel für moderne Browser, damit sie die nachfolgende height-Angabe ignorieren */
        height: 100%; /* Mindesthöhe im IE */
        z-index: 100;
        left:50%;
        top: 250px;
        /*bottom: 0px;*/ /* auskommentiert = deaktiviert */
        margin:0;
        padding:0;
        margin-left:-375px;
        background-color: #ffffff;
        padding: 10px;
}

Fabian Frank · 22. März 2008

Vielen, vielen Dank. Jetzt funktioniert es!

✔ CSS-Layer height:100%; (funktioniert nicht)

Fabian Frank

Erfahrenes Mitglied

Maik

Fabian Frank

Erfahrenes Mitglied

Anhänge

Maik

Fabian Frank

Erfahrenes Mitglied

Maik

Fabian Frank

Erfahrenes Mitglied

Maik

Fabian Frank

Erfahrenes Mitglied

Neue Beiträge