mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 30.09.2020 11:04 Benutzername: Passwort: Auto-Login

Thema: DIV Problem - 100% Höhe vom 28.08.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> DIV Problem - 100% Höhe
Seite: 1, 2, 3  Weiter
Autor Nachricht
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 28.08.2007 13:13
Titel

DIV Problem - 100% Höhe

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich habe ein kleines Problem. Ich habe ein dreispaltiges Layout, bei dem alle drei Spalten gleich lang sein sollen, nämlich genau so lang, wie die Spalte mit dem längsten Inhalt. Soweit kein Problem, faux colums helfen mir da weiter. Die zweite Bedingung ist aber, dass wenn der Inhalt mal kleiner sein sollte, wie das Browserfenster, die drei Divs jeweils bis zum Browserende gehen.

Nochmal zusammengefasst: Die drei Spalten müssen auf jeden Fall bis zum unteren Browserende gehen, ist der Inhalt länger, dann sollen sie alle drei mitwachsen.

Hab schon gegoogelt und hier im Forum nachgelesen, aber nicht wirklich was gefunden, das mir weiterhilft. Ist das überhaupt möglich, oder muss ich das mit Tabellen realisieren (würde es gern vermeiden)

Vielen Dank schonmal


Zuletzt bearbeitet von Krisslinger am Fr 31.08.2007 11:51, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 28.08.2007 13:17
Titel

Re: DIV Problem - 100% Höhe

Antworten mit Zitat Zum Seitenanfang

Wittlinger hat geschrieben:
... und hier im Forum nachgelesen, aber nicht wirklich was gefunden, das mir weiterhilft.


* Ööhm... ja? * Vielleicht solltest du die Suche doch nochmal zum Einsatz bringen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Di 28.08.2007 13:24
Titel

Re: DIV Problem - 100% Höhe

Antworten mit Zitat Zum Seitenanfang

Servus Lächel
Wittlinger hat geschrieben:

oder muss ich das mit Tabellen realisieren (würde es gern vermeiden)

form follows function, also gar nicht erst auf die Idee mit Tabellen kommen * Ja, ja, ja... *
Wittlinger hat geschrieben:

Nochmal zusammengefasst: Die drei Spalten müssen auf jeden Fall bis zum unteren Browserende gehen, ist der Inhalt länger, dann sollen sie alle drei mitwachsen.

Pack ein Div außen rum, gib ihm das faux-columns-Bild mit, gib dem html und body eine Höhe von 100%, dem Div drum herum ein min-height mit 100%, dann klappt das schon.
Für den IE musst du noch einen kleinen Hack einbauen, denn der versteht min-height nicht, interpretiert aber height, wie min-height.
Fütter google richtig, dann klappt das auch da Lächel

Code:

html,
body {
height:100%
}

div#aussen {
min-height:100%;
height:auto !important;
height:100%
}
  View user's profile Private Nachricht senden
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 28.08.2007 13:35
Titel

Antworten mit Zitat Zum Seitenanfang

Na herzlichen Dank, dann werd ich das mal ausprobieren. Hab ehrlich kein Bock darauf, Tabellen zu verweden, schon aus dem Grund weil ich die übersrpungen hab, nach den Frames kamen gleich die Divs und bis dahin hab ich auch immer alles hinbekommen, nur diesmal war ich kurz vorm Scheitern, dank eurer Hilfe sollte das ja jetzt kein Problem mehr darstellen.

In diesem Sinne: Vielen Dank


Edit: Ok hat funktioniert. Vielen Dank. Einziges Problem macht der IE 5.5, aber da muss ich dann halt ne alternative 5.5.css laden. Super, vielen Dank nochmal!


Zuletzt bearbeitet von Krisslinger am Di 28.08.2007 16:10, insgesamt 6-mal bearbeitet
  View user's profile Private Nachricht senden
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 31.08.2007 12:03
Titel

Antworten mit Zitat Zum Seitenanfang

OK, wider erwarten hat doch nicht alles funktioniert.

Nachdem ich den Rat von nicoG befolgt hab, hat soweit fast alles funktioniert. IE 6 und 7, Opera und Firefox haben die Seite auf 100% der Browsergröße angepasst, obwohl der Inhalt kürzer ist. Zu Testzwecken hab ich den Contentbereich mal mit viel Text gefüllt um zu sehen, was passiert, wenn er länger wird als das Browserfester. IE 6 und 7 skalieren wie es sein soll alle Bereiche bis nach unten, Firefox und Opera allerdings nicht, da wächst nur der Contentbereich weiter, der Rest bleibt auf der Höhe des Browserausschnitts.

Ich hab dann einfach nen Footer unten ran gepackt und siehe da, alle Browser skalieren richtig. Jetzt wollte ich den Footer aber mit Text füllen, wenn der Content Überlänge hat passt auch alles soweit. Ist der Content allerdings leer bzw sehr kurz, richtet sich der Footer am längsten Element aus, das allerdings nur bis zur Mitte des Browserfensters geht. Der Footer sollte aber immer am unteren Bildschirm Rand liegen.

Hier mal die CSS:

Code:

html,
body {
   
   height: 100%;
   margin: 0px;
   background: url(../images/main_background.gif) repeat;
   text-align: center;
   }
   
#container {
   
   background: url(../images/container_background.gif) repeat-y;
   min-height: 100%;
   height: auto !important;   
   height: 100%;
   width: 996px;
   margin: 0px auto;
   text-align: left;
      }
   
#header {

   width: 996px;
   height: 80px;
   background: url(../images/header.gif) no-repeat;
   }
   
#navi {
   float: left;
   width: 182px;
   background: url(../images/navi_rundung.gif) top right no-repeat;
   border-top: 2px #FFFFFF solid;
   font: 12px/24px Verdana, sans-serif;
   }
   
#main {

   float: left;
   width: 574px;   
   }
   
#contact {
   float: left;
   width: 240px;
   padding-top: 54px;
   background: url(../images/contact_top.gif) no-repeat top;
   }
   
#footer {
   clear: both;
   width: 996px;
   height: 20px;
   color: #FFFFFF;
   }
   
#animation {

   width: 574px;
   height: 154px;
   background: url(../images/animation_background.gif) no-repeat;
   }

#angebot {

   width: 570px;
   height: 66px;
   background-color: #ffe3ca;
   border: 2px #FFFFFF solid;
   }
   
#content {

   width: 570px;
   background-color: #fca150;
   border-left: 2px #FFFFFF solid;
   border-right: 2px #FFFFFF solid;
   }
   
#formular {
   background-color: #d4d9e8;
   padding-top: 23px;
   padding-left: 23px;
   border-top: 2px #FFFFFF solid;
   border-bottom:2px #FFFFFF solid;
   }


Und hier die HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <title>Bekanntes Dokument</title>
 <link rel="stylesheet" href="css/screen.css" media="screen">

</head>

<body>

 <div id="container">
 
  <div id="header"></div>
 
  <div id="navi">

   <ul>
    <li><a class="home" href="#">Home</a></li>
    <li><a class="aktiv" href="#">Fahrtraining</a></li>
    <li><a class="ebene2" href="#">PKW</a></li>
    <li><a class="ebene2" href="#">Motorrad</a></li>
    <li><a class="ebene2" href="#">LKW</a></li>
    <li><a class="ebene2" href="#">Bus</a></li>
    <li><a class="navi" href="#">Firmentraining</a></li>
    <li><a class="navi" href="#">Trainingsgelände</a></li>
    <li><a class="navi" href="#">Specials</a></li>
    <li><a class="navi" href="#">Presse</a></li>
    <li><img src="images/navi_strasse.gif" /></li>
   </ul>
 
  </div>
 
  <div id="main">
   

   <div id="animation"></div>
   <div id="angebot"></div>
   <div id="content">
   test<br>
   </div>
 
  </div>
 
  <div id="contact">
   
   <div id="formular">
   
    <h1>Nehmen Sie jetzt Kontakt auf:</h1>
   
   <form method="post">
   
    <table class="tabelle">
     <tr>
      <td class="button"><input type="radio" name="Anrede" value="Herr"/></td>
      <td class="anrede">Herr</td>
      <td class="button"><input type="radio" name="Anrede" value="Frau"/></td>
      <td class="anrede">Frau</td>
     </tr>
    </table>
   
   <input class="felder" type="text" value="Vorname:"/>
   <input class="felder" type="text" value="Nachname:"/>
   <input class="felder" type="text" value="Telefon:"/>
   <input class="felder" type="text" value="E-Mail:"/>
   
   <h2>Ich möchte:</h2>
   
   <table>
     <tr>
      <td class="check"><input class="check" type="checkbox" name="wunsch" value="Rückruf" /></td>
      <td class="anrede">Rückruf</td>
     </tr>
     <tr>
      <td class="check"><input class="check" type="checkbox" name="wunsch" value="Angebot" /></td>
      <td class="anrede">Angebot</td>
     </tr>
     <tr>
      <td class="check"><input class="check" type="checkbox" name="wunsch" value="Sonstiges" /></td>
      <td class="anrede">Sonstiges</td>
     </tr>
    </table>
   
    <h2>Ihre Nachricht:</h2>
   
    <textarea class="text"></textarea>
   
    <a class="contact" href="#">Absenden</a>
   
    <div class="adresse">
       <div class="boldbig">Firma</div>
      Straße<br />
      Stadt<br />
      <div class="bold">Telefon</div>
      Telefax
    </div>

   
   </form>
   
   </div>
 
  </div>
 
   <div id="footer">
   © 2007 Firma<br />
   Impressum | Datenschutz
  </div>
 
 </div>
 


</body>
</html>


Wär echt schick wenn mir jemand dabei helfen könnte, komm nicht mehr weiter. Vielen Dank
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 31.08.2007 12:10
Titel

Re: DIV Problem - 100% Höhe

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
Wittlinger hat geschrieben:
... und hier im Forum nachgelesen, aber nicht wirklich was gefunden, das mir weiterhilft.


* Ööhm... ja? * Vielleicht solltest du die Suche doch nochmal zum Einsatz bringen.


Suche: "Footer"
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 31.08.2007 16:02
Titel

Antworten mit Zitat Zum Seitenanfang

Ich weiß ja nicht ob du den ganzen Tag nichts besseres zu tun hast, als dich selbst zu zitieren, aber ich habe die Suche benutzt und erst dann gepostet. Ich bin in verschiedenen Foren und Topic auf den Artikel von Manuel Biehl :Einmal Erdgeschoss bitte, gestoßen und hab das auch ausprobiert, ging aber nicht. Hab dann hier geposted. Und nach deinem Kommentar hab ich mich dann nochmal hingesetzt und alles durchgemacht und auch nochmal neu umgestellt, und trotzdem hab ich nicht den gewünschten Effekt.

Ich bin jetzt soweit, dass zwar alle den Footer unten anzeigen, aber wenn gescrollt wird, dann wächst nur bei den beiden IEs alles mit, bei Opera und Firefox wird der Restbereich nicht mitskaliert.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 31.08.2007 16:22
Titel

Re: DIV Problem - 100% Höhe

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
m hat geschrieben:
Wittlinger hat geschrieben:
... und hier im Forum nachgelesen, aber nicht wirklich was gefunden, das mir weiterhilft.


* Ööhm... ja? * Vielleicht solltest du die Suche doch nochmal zum Einsatz bringen.


Suche: "Footer"


Ganz ehrlich, das Thema gibt es so oft, und ich habe so oft schon etwas dazu gesagt
dass es einfach irgendwann anfängt zu nerven wenn einem erzählt wird "ich habe die
Suche benutzt aber nichts gefunden".

Ich zitiere mich selbst gerne ja, und es ist eher so dass ich besseres zu tun habe
als Antworten jeden Tag auf ein neues zu wiederholen und verweise dann schon mal
auf die Suche was wohl korrekt so ist wenn man genau weiß dass sich durch eine Suche
das Problem lösen lässt. Ist klar, ich bräuchte auch gar nicht antworten, aber das hilft
noch weniger und ein wenig eigeninitiative schadet sicher nicht.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="de" lang="de">
  <head>
    <title>CSS Layout, height 100% &amp; Footer</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    html, body {
        height: 100%;
    }
    div#wrapper {
        position: relative;
        margin: 0 auto;
        width: 800px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        background: #eee;
    }
    div#header {
        height: 80px;
        background: #ccc;
    }
    div#content {
        background: #bbb;
        padding-bottom: 50px;
    }
    div#footer {
        position: absolute;
        bottom: 0;
        clear: both;
        width: 800px;
        height: 20px;
        background: #ddd;
    }
    </style>
</head>
<body>
    <div id="wrapper">
         <div id="header">
             header
         </div>

         <div id="content">
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />

             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />

             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />

             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />

             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt Inhalt <br /><br /><br />
             Inhalt
         </div>
         <div id="footer">

             footer
         </div>
    </div>
</body>
</html>


Zuletzt bearbeitet von m am Fr 31.08.2007 17:13, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] Div 100% Höhe und BG-Bild - Problem
prob mit div 100% Höhe
DIV verweigert 100% Höhe
CSS DIV 100% Höhe
div-Höhe 100% wird bei scrollen nicht angezeigt
Div-Höhe am u. Browserrand orientieren ohne height: 100%?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.