[HTML] height=100% funktioniert nicht

Black Katrin
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
<!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" />
<link href="style/style.css" rel="stylesheet" />
<title>Unbenanntes Dokument</title>
</head>
<body>

<table border="5" style="width:700px; height:100%;" align="center">
 <tr>
  <td colspan="2"><img src="style/header.jpg" /></td>
 </tr>

 <tr>
  <td width="200" valign="top"><br><a href='index.php?section=main' class='menu'>Startseite</a><br><a href='index.php?section=Unser_Angebot' class='menu'>Unser Angebot</a><br><a href='index.php?section=Preisliste' class='menu'>Preisliste</a><br><a href='index.php?section=Kontakt' class='menu'>Kontakt</a></td>
  <td width="500" valign="top" height="100%"> </tr>
</table>


</body>
</html>

http://mosterei.sunfield.ch/

ich weiss echt nit was falsch ist unglücklich sonst klappt das doch immer
Thorim
musst glaub bei html & body auch jeweils noch per CSS "height: 100%;" zuweisen
MissMiralda
Die 100% würde ich unter Anführungszeichen setzen. smile
Black Katrin
hatte ich schon versucht, zwecklos... und müsste auch ohne gehen (jedenflals geht es auch ohne bei meinen anderen pages o.O)

edit: unter anführungszeichen? o.O height: "100%" ??? ich hoffe das war nen scherz oder ich hab dich missverstanden...
MissMiralda
Echt? o.O
Oha. xDD

Bei mir sieht das so aus:
code:
1:
2:
3:
<table class="tabelle"
 style="width: 90%; text-align: left; margin-left: auto; margin-right: auto;"
 border="1" cellpadding="1" cellspacing="1">

und das klappt so. Der einzige Unterschied der mir einfallen würde, wäre dass ich zwischen width: und der Angabe in Prozent eine Leertaste gemacht habe, aber ausschlaggebend is das bestimmt nicht?

EDIT.
Das mit Anführungszeichen war mist, hatte es mit irgendetwas gerade verwechselt - sorry. großes Grinsen
Oli
Hi,

es wird 100% des verfügbaren Platzes angezeigt. Eine Internetseite ist normalerweise aber nur so hoch wie der Inhalt. Will man das ändern, muss man im CSS andere Seitenmaße vorgeben:
code:
1:
2:
3:
html, body {
   height: 99%;
}

Ich empfehle außerdem 99% statt 100%, weil viele Browser noch einen kleinen Abstand zum Seitenrand halten und bei 100% eine Scrollleiste anzeigen würden. Das kann man zwar auch im CSS lösen, aber das wäre mehr Aufwand, weil die Seite dann möglicherweise nicht mehr wie gewünscht aussieht.

Zitat:
Original von MissMiralda
Das mit Anführungszeichen war mist, hatte es mit irgendetwas gerade verwechselt - sorry. großes Grinsen
Vermutlich HTML und CSS - du meintest die Anführungszeichen bei einem <td height="100%"> Augenzwinkern .

LG,
Oli
MissMiralda
Zitat:
Original von Oli
Zitat:
Original von MissMiralda
Das mit Anführungszeichen war mist, hatte es mit irgendetwas gerade verwechselt - sorry. großes Grinsen
Vermutlich HTML und CSS - du meintest die Anführungszeichen bei einem <td height="100%"> Augenzwinkern .
i


Genau! xD
Danke. ^^
Black Katrin
dann erklär mir mal jemand wieso es hier ( http://web271.zeta.ibone.ch/test/?section=bilder&tag_id=9 ) auch ohne funktioniert hatte... =/
Oli
Schwer zu sagen, ich kann grad nicht testen, aber ich vermute, das liegt an der Tabelle in der Tabelle:

code:
1:
2:
3:
4:
<table height="100%">
-- <tr>
---- <td height="100%">
------ <table height="100%"> füllt nun also 100% des übergeordneten <td> aus


Die Seite hatte also 100% Höhe, weil das <td> durch die Tabelle (= Inhalt) ausgefüllt war.

Noch fragen? Augenzwinkern
Oli
Zitat:
Original von Mordred
Zitat:

Ich empfehle außerdem 99% statt 100%, weil viele Browser noch einen kleinen Abstand zum Seitenrand halten und bei 100% eine Scrollleiste anzeigen würden. Das kann man zwar auch im CSS lösen, aber das wäre mehr Aufwand, weil die Seite dann möglicherweise nicht mehr wie gewünscht aussieht.

Käse! Box-Modell verstanden?


In der Tat. ABER: Der Browserstandard setzt teilweise automatisch padding, margin und manchmal sogar border für <body>. Man könnte diese im CSS entfernen, dann passen die 100% natürlich exakt. Dann sind diese Ränder aber nicht mehr da - und man müsste sie "manuell" wieder einbauen.

Probier doch mal:
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
<html>
 <head>
  <style>
   html, body, .test {
    height: 100%;
   }
   .test {
    border: 1px solid red;
   }
  </style>
 </head>
 <body>
  <div class="test">Blabla</div>
 </body>
</html>

und du wirst sehen, dass 100% hier durch das Standardlayout des Browsers mehr als 100% sind.

Edit: Der Code ist natürlich vereinfacht, also bitte nicht über z.B. den fehlenden DocType kritisieren Augenzwinkern .
Oli
Okay, anderes Beispiel, warum 99% sinnvoller sind.
Wenn ein <div> 100% Höhe hat, und man noch einen border dazu nimmt, ist es größer als 100% und ein Scrollbalken erscheint. Hier mit deinem angesprochenen Reset - aber trotzdem höher als 100%.

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
<html>
 <head>
  <style>
   html, body, .test {
    margin: 0px 0px;
    border: 0px;
    padding: 0px;
    height: 100%;
   }
   .test {
    border: 1px solid red;
   }
  </style>
 </head>
 <body>
  <div class="test">Blabla</div>
 </body>
</html>


Natürlich gibt es auch hier bessere Lösungen - keine Frage - aber wer sich in diesem Thema nicht sonderlich gut auskennt, ist mit 99% als Empfehlung besser beraten - oder etwa nicht?
Thorim
mit nem border hast aber au bei 99% nen Problem, spätestens wenn du unter 200px fensterhöhe hast, weil dann braucht dein border auch schon mehr als 1%

100% sind eig schon richtig, wer ne border braucht, soll dann halt 2 divs ineinanderpacken und gut is
Oli
Klar - jeder, wie er will. Ich selbst störe mich auch schon an einzelnen Pixeln, die nicht passen, aber eine einfache Lösung hat man mit 99% erreicht.

Dennoch habt ihr insofern Recht, dass die Lösung nicht perfekt ist. Das Box-Modell habe ich übrigens schon verstanden - nicht, dass ein falscher Eindruck entsteht.

@Mordred: Falls du diesen Blog mal findest, ich hätte Interesse dran Augenzwinkern . Schick mir dann bitte ne PN.
Black Katrin
ich versteh einfach nit wieso es teilweise funktioniert ohne und teilweise nit... und teilweise sogar mehr fehler produziert wenn ichs in html und body auch rein setzte *seufz* jedesmal muss ichs neu raus finden...