UnKnOwN_86
Ensign
- Registriert
- Apr. 2010
- Beiträge
- 177
Hi.
Ich habe ein 2 Spalten Layout und bräuchte beim Feinschliff eure Hilfe.
Die erste (linke) Spalte hat eine fixe Größe von 100pt in der Weite und 300pt in der Höhe.
Die zweite (rechte) Spalte besteht aus mehreren Span Elementen und ist eine Auflistung von Beschreibungen/Produktinformationen.
In dieser (rechte) Spalte habe ich unter den Span Elementen eine Liste die ewig lang sein kann und wenn die Höhe überschreitet eine Scrollbalken erscheinen soll.
Mein Problem ist nun dass ich dieser Liste eine fixe Höhe zuteile (damit ein Scrollbalken erscheint), dies würde ich gerne gegen eine etwas variableren Wert tauschen und zwar sollte es die komplette restliche Fläche einnehmen bis es mit der linken Spalte abschließt.
Also linke Spalten Höhe minus der Höhe der Span Element über dieser Liste = restlicher Platz.
Hier ein Pseudo HTML Code:
Würde man in diesem HTML Code nun die span Elemente mit dem Text:
"Some Random Text 7" bis "Some Random Text 10" entfernen würde die ul Liste nicht mehr mit der Linken Spalte abschließen, sondern mitten drin aufhören und in der Luft hängen.
Wie kann ich es nun erreichen das es immer gleich abschließt?
Hoffe ihr könnt mir helfen.
Ich habe ein 2 Spalten Layout und bräuchte beim Feinschliff eure Hilfe.
Die erste (linke) Spalte hat eine fixe Größe von 100pt in der Weite und 300pt in der Höhe.
Die zweite (rechte) Spalte besteht aus mehreren Span Elementen und ist eine Auflistung von Beschreibungen/Produktinformationen.
In dieser (rechte) Spalte habe ich unter den Span Elementen eine Liste die ewig lang sein kann und wenn die Höhe überschreitet eine Scrollbalken erscheinen soll.
Mein Problem ist nun dass ich dieser Liste eine fixe Höhe zuteile (damit ein Scrollbalken erscheint), dies würde ich gerne gegen eine etwas variableren Wert tauschen und zwar sollte es die komplette restliche Fläche einnehmen bis es mit der linken Spalte abschließt.
Also linke Spalten Höhe minus der Höhe der Span Element über dieser Liste = restlicher Platz.
Hier ein Pseudo HTML Code:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#Container
{
width: 400pt;
}
#LeftColumn
{
float: left;
width: 100pt;
height: 300pt;
border: 1px solid red;
}
#RightColumn
{
margin-left: 110pt;
border: 1px solid yellow;
}
#RightColumn span
{
display: block;
margin-bottom: 5pt;
}
#RightColumn ul
{
height: 94pt;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="Container">
<div id="LeftColumn">
<span>I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
I am some Left Column Text
</span>
</div>
<div id="RightColumn">
<span>Some Random Text 1</span>
<span>Some Random Text 2</span>
<span>Some Random Text 3</span>
<span>Some Random Text 4</span>
<span>Some Random Text 5</span>
<span>Some Random Text 6</span>
<span>Some Random Text 7</span>
<span>Some Random Text 8</span>
<span>Some Random Text 9</span>
<span>Some Random Text 10</span>
<ul>
<li>ListElement 1</li>
<li>ListElement 2</li>
<li>ListElement 3</li>
<li>ListElement 4</li>
<li>ListElement 5</li>
<li>ListElement 6</li>
<li>ListElement 7</li>
<li>ListElement 8</li>
<li>ListElement 9</li>
<li>ListElement 10</li>
<li>ListElement 11</li>
<li>ListElement 12</li>
<li>ListElement 13</li>
<li>ListElement 14</li>
<li>ListElement 15</li>
<li>ListElement 16</li>
</ul>
</div>
</div>
</body>
</html>Würde man in diesem HTML Code nun die span Elemente mit dem Text:
"Some Random Text 7" bis "Some Random Text 10" entfernen würde die ul Liste nicht mehr mit der Linken Spalte abschließen, sondern mitten drin aufhören und in der Luft hängen.
Wie kann ich es nun erreichen das es immer gleich abschließt?
Hoffe ihr könnt mir helfen.
