tutorials.de Buch-Aktion 02/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
482
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 22.08.10 15:11 #1
    Templorials Templorials ist offline Mitglied Gold
    Registriert seit
    Aug 2004
    Ort
    Österreich
    Beiträge
    169
    Hallo!

    Gibt es eine schöne Möglichkeit beim folgendem Quelltext:

    HTML-Code:
    ...
<div id="footer">variabler Text -> variable Höhe</div>
<div id="content">variabler Text -> variable Höhe</div>
...
    Das footer unter content angezeigt wird? Wenn die Höhen fix wären könnte man das z.B. mit absoluten Positionieren machen. Aber die Höhe der divs ist je nach Inhalt.

    Danke


    UPDATE:
    Habe gerade durch diverse Versuche eine Lösung gefunden, welche im aktuellen FF und Chrome funktioniert. Mich würde interessieren ob diese Lösung auch im IE (7/8) funktioniert.

    HTML-Code:
    <div style="position:relative">
	<div style="position:absolute;top:100%">
		<h1>Footer</h1>
		<p>Absatz1</p>
		<p>Absatz2</p>
	</div>
	<div>
		<h1>Content</h1>
		<p>Absatz1</p>
		<p>Absatz2</p>
	</div>
</div>
    Knackpunkt ist wohl das 100% ob es durch das relative auch im IE von parent-div genommen wird oder 100% von der Seite. Bei FF und Chrome klappt das so wie gesagt.

    UPDATE:
    Habe einen IE6 gefunden. Dort funktioniert der obige Code so nicht ganz. Jedoch wenn ich dem container-div eine Breite geben gehts :-D ... Da das später der Fall ist stört mich das nicht weiter.
    Geändert von Templorials (22.08.10 um 15:33 Uhr)
     
    Zitieren Zitieren
  2. 22.08.10 21:08 #2
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.099
    Hallo,

    bei mir würde das so in allen gängigen Browsern (auch IE6) funktionieren:
    HTML-Code:
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test: Absolute Positionierung</title>
    <style type="text/css">
      * {
        margin: 0;
        border: 0;
        padding: 0;
      }
      body {
      	height: auto;	/* andere Werte erzeugen andere Darstellung im IE6 */
      	background-color: #eee;
      }
      #wrapper {
        position: relative;
        margin: auto;
        background-color: #fcf;
      }
      #footer {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #cff;
      }
      #content {
        background-color: #ffc;
      }
      .innerWrapper {
      	margin: 0;	/* andere Werte erzeugen andere Darstellung im IE6 */
      	border: 1px solid red;
        padding: 1em;
      }
    </style>
  </head>
  <body>

<div id="wrapper">

  <div id="footer">
    <div class="innerWrapper">
      <h1>Footer</h1>
      <p>Absatz1</p>
      <p>Absatz2</p>
    </div>
  </div>

  <div id="content">
    <div class="innerWrapper">
      <h1>Content</h1>
      <p>Absatz1</p>
      <p>Absatz2</p>
    </div>
  </div>

</div>

  </body>
</html>
     
    Zitieren Zitieren
« Tabellenähnliche Ausgabe mit CSS | Darstellung stimmt nicht »

Ähnliche Themen

  1. Laufschrift von unten nach oben
    Von mtvrheinwacht im Forum Javascript & Ajax
    Antworten: 12
    Letzter Beitrag: 13.11.08, 16:21
  2. Oben im Quelltext, unten im Browser: DIV platzieren
    Von Quests Sohn im Forum CSS
    Antworten: 4
    Letzter Beitrag: 27.11.07, 21:06
  3. Laufschrift von Oben nach unten
    Von Thilnd im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 12.09.05, 13:15
  4. Wellenlinie von oben nach unten ?
    Von otto100 im Forum Photoshop
    Antworten: 9
    Letzter Beitrag: 07.08.04, 14:22
  5. Pfeil nach oben/unten
    Von Zippo im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 15.03.04, 20:00