✔ div problem

[bbuehler]

Hallo !

Ich hab folgendes Problem:

Ich hab eine Seite, die über die ganze Höhe des Browserfensterchens gehen soll. Oben kommt ein Bild rein mit fester Höhe 240px und unten eine Leiste mit fester Höhe 40px. Dazwischen soll ein div sein, dass den Text enthält.
Dieses div soll per overflow:auto über einen Scrollbalken verfügen, sollte der Text zulange sein.

Um das so machen zu können müsste ich dem div mit Text eine gewisse Höhe geben, welche ich aber nicht weiss, da sie ja variabel sein soll.
So hat jemand mit einer Höhe von 600 das div 320px hoch und jemand mit 800 dann halt 520px.

Hat von Euch jemand eine Idee, wie ich das realisieren kann?

Vielen Dank schonmal im Voraus.

MfG
Björn

 

[Sven Mintel]

Hallo...


Probiers mit ner Tabelle,100% hoch.
3 Zeilen...

• erste Zeile mit deinem Bild...die Zelle erhält eine Höhe von 240px;
• zweite Zeile mit dem <div>...das <div> erhhält eine Höhe von 100% und overflow:scroll
• dritte Zeile mit deiner Leiste... die Zelle erhält eine Höhe von 40px

 

[bbuehler]

Tabelle

Danke Dir, aber Tabellen soll ich keine verwenden, ist so die Vorgabe, deshalb bin ich auch grad etwas im rudern.

Gruss
Björn

 

[Fabian H]

<style type="text/css">

body {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

.DivTop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 240px;
  background-color: #AAAAAA;
}

.DivContent {
  position: absolute;
  top: 240px;
  bottom: 40px;
  overflow: auto;
  width: 100%;
  background-color: #FAFAFA;
}

.DivBottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  background-color: #AAAAAA;
}

</style>

<div class="DivTop">
  Oben
</div>
<div class="DivContent" id="ContentField">
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  Ende

</div>
<script type="text/javascript">

if (   (navigator.userAgent.indexOf('MSIE')  != -1)
    && (navigator.userAgent.indexOf('Opera') == -1)) {
    window.document.getElementById('ContentField').style['height'] = (window.document.getElementsByTagName('body')[0].offsetHeight - 285) + 'px';
}

</script>
<div class="DivBottom">
  Unten
</div>

Dieses dämliche JavaScript braucht man nur, weil der (Tadaa) IE mal wieder nicht mitkommt.
Und die zweite Zeile in der IF-Abfrage braucht man, weil die macher vom Opera meinen, sie müssen sich MS anschließen und sich als IE ausgeben...
Sowas regt auf...

Aber egal, wie du oben im Code siehst, werden alle Elemente absolut positioniert und der Div mit dem Text hat die zwei Attribute top und bottom um die Höhe zu bestimmen.

 

[bbuehler]

DANKE

Das mit dem JavaScript ist die perfekte Lösung, so gehts im IE und in allen anderen.

DANKE DIR.

Gruss
Björn

 

[cozmixx]

Der Thread hier ist zwar schon etwas älter -

aber trotzdem absolut hilfreich! Genau die Lösung, die ich gerade gesucht hab.

Großes Merci!