nicht angemeldet
Höhe einer Tabellenzelle an Auflösung anpassen
Salve,
in meinem Layout habe ich eine Tabelle mit einer Spalte und zwei Zeilen. In der oberen Zeile ist mein Logo, in der unteren, unterlegt von einem Hintergrundbild, der Seiteninhalt. Unter dieser Tabelle kommt nichts mehr.
Die zweite Zeile der Tabelle wird bei viel Inhalt gestreckt, aber bei wenig Inhalt zieht sie sich zusammen, was bei Usern mit hoher Auflösung einen unschönen Effekt in Form von sehr viel freiem weißem Platz im unteren Bereich der Seite führt. Dies möchte ich vermeiden.
Ich weiß, wie hoch das Fenster in Pixeln ist, aber nicht, wie ich der Zeile eine Höhe mitteilen soll. Wie geht das in JavaScript?
-
in meinem Layout habe ich eine Tabelle mit einer Spalte und zwei Zeilen. In der oberen Zeile ist mein Logo, in der unteren, unterlegt von einem Hintergrundbild, der Seiteninhalt. Unter dieser Tabelle kommt nichts mehr.
Weshalb brauchts du denn eine Tabelle dafür? Da gibts doch etliche einfachere HTML-Tags, wie divs listen oder <p>
Ich weiß, wie hoch das Fenster in Pixeln ist, aber nicht, wie ich der Zeile eine Höhe mitteilen soll. Wie geht das in JavaScript?
Wenn du das entsprechende Objekt hast.
object.style.height = pixel + "px";Mit der Id:
document.getElementById("id").style.height = pixel + "px";Aber denk dran. Tabellen, sind nicht für Layout gedacht.
andy
-
Nachtrag:
Was machst du, wenn jemand die Fenstergrösse ändert?
Willst du dann die Höhe ständig anpassen?Eie wärs mit height = 100%? Das schliesst dann allerdings eine width-Angabe in Prozent aus. Ausserdem ist das height nicht XHTML-konform. Ausser in css natürlich.
-
Ich seh es ja ein. Ich schreibe die Sachen einfach so untereinander. Ich verzweifel aber an so elementaren Problemen wie dem Zuweisen von Höhe einem div-Tag. Die Höhe nimmt der nur vom Text, der da drin steht. Geht das überhaupt?
Wie wärs mit height = 100%? Das schliesst dann allerdings eine width-Angabe in Prozent aus.
Wieso denn das?
-
Ich war mal wieder zu schnell mit antworten (da vermisse ich die Möglichkeit, meinen Post von eben zu editieren).
Die Höhe nimmt er an, wenn man sie in CSS angibt. Allerdings kann man ihm nicht sagen, nimm das, was noch da ist (vermutlich liegt das daran, daß Höhe grundsätzlich beliebig viel vorhanden ist).
Das Problem taucht nämlich innen noch einmal auf. Ich möchte unter einer Tabelle ein div haben, daß den kompletten restlichen Raum ausfüllt. Das ist zwar leer und unsichtbar, hat aber eine onmouseover-Funktion.-
Also dies ist eine bastelei.
Ich würde mir grundsätzlich was anderes überlegen.<html>
<head>
<title></title>
<script type='text/javascript'>
window.onresize = setDimension;
function setDimension(){
var yWindow = getScreenHeight()-20;
var yContent = getContentHeight();
var yFueller = yWindow - yContent;
document.getElementById("fueller").style.height = yFueller + "px;";
}function getScreenHeight(){
// all except Explorer
if (self.innerHeight) return self.innerHeight;// Explorer 6 Strict Mode
else if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;// other Explorers
else if (document.body) return document.body.clientHeight;
}function getContentHeight(){
var test = document.getElementById("content");
var test1 = test.scrollHeight;
var test2 = test.offsetHeight// all but Explorer Mac
if (test1 > test2) return test.scrollHeight;// Explorer Mac
else return test.offsetHeight;
}
</script>
</head>
<body style='margin-top:10px; margin-bottom:10px;' onload='setDimension();'>
<div id='content'>
<div style='border-bottom:1px solid black;'>Hier das Menu</div>
<div style='margin-top:20px;'>Hier der Inhalt der Webseite<br />Hier der Inhalt der Webseite</div>
</div><div id='fueller' style='background-color:red;'>
</div>
</body>
</html>
-
-
-
-