Otto Wyss: Probleme mit dem Box-Modell

Ich habe eine Webseite gemacht, bei der im mittleren Teil nur den restlichen Platz verwendet werden soll. Allerdings bringe ich das Box-Modell nur dazu richtig (also ohne Scrollbalken) zu berechnen, wenn ich genau ein einzelnes Div darin habe. Sobald etwas zusätzlicher Platz benötig wird, wird zuviel Platz berechnet.

richtig: http://www.orpatec.ch/osm/tools/main.php
falsch: http://www.orpatec.ch/osm/tools/test.php

Dabei ist es unerheblich, ob ich im mittleren Teil (#inhaltsbereich) "overflow: auto" oder "overflow: hidden" verwende, statt gescrollt wird einfach abgeschnitten. Wie kann ich das Box-Modell dazu bringen, dass das "<div id="map"></div>" nur genau der Bereich verwendet wird, der noch frei ist?

  1. Om nah hoo pez nyeetz, Otto Wyss!

    whitespace?
    margin, border, padding der einzelnen Div-Elemente?

    Matthias

    --
    1/z ist kein Blatt Papier.

  2. Hi,

    Allerdings bringe ich das Box-Modell nur dazu richtig (also ohne Scrollbalken) zu berechnen, wenn ich genau ein einzelnes Div darin habe. Sobald etwas zusätzlicher Platz benötig wird, wird zuviel Platz berechnet.

    100% plus X sind nun mal mehr als nur 100%, das ist ganz simple Mathematik.

    Wie kann ich das Box-Modell dazu bringen, dass das "<div id="map"></div>" nur genau der Bereich verwendet wird, der noch frei ist?

    Absolute Positionierung mit Angabe aller vier Eckkoordinaten wäre eine Möglichkeit - wenn du die Höhe des darüber liegenden Bereiches (im Moment die h3-Überschrift) korrekt abschätzen kannst (also vor allem garantieren kannst, dass dessen Inhalt nur einzeilig bleiben wird).

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
  3. @@Otto Wyss:

    nuqneH

    Wie kann ich das Box-Modell dazu bringen […]

    So.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Wie kann ich das Box-Modell dazu bringen […]

      So.

      "box-sizing:border-box;" wäre wahrscheinlich die Lösung, nur SeaMonkey unterstützt es nicht (noch nicht?).

      Wie ich es mittels "position:relative/absolute" schnall ich jetzt nicht.

      Gibt es eine Möglichkeit mittels Javascript die Höhenberechnung zu machen? Wo müsste ich das nachlesen? Gibt es dazu ein Beispiel?

      1. Hallo

        "box-sizing:border-box;" wäre wahrscheinlich die Lösung, nur SeaMonkey unterstützt es nicht (noch nicht?).

        Die Browser unterstützen es schon länger, die ein wenig älteren allerdings nur mit den jeweiligen Präfixen (-moz, -webkit und -ms).
        Das wäre dann -moz-box-sizing.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        1. Das wäre dann -moz-box-sizing.

          Danke, das habe ich nicht gewusst. Trotzdem scheint es immer noch nicht zu funktionieren. Zum einen wird immer noch falsch gerechnet, zum anderen geht sogar die Zentrierung verloren, wenn ein Rahmen angegeben wird.

          richtig: http://www.orpatec.ch/osm/tools/main.php
          falsch: http://www.orpatec.ch/osm/tools/test.php

          Scheint doch ein Problem von Mozilla zu sein.