Ergebnis 1 bis 3 von 3

Thema: DIV height Problemchen

  1. #1
    digitalyzer
    Gast

    Standard DIV height Problemchen

    Grüß euch!

    Ich bekomm die Krise! Es will einfach nicht funktionieren! Es geht darum: Die Seite besteht aus mehreren DIVs. Diese DIVs sollen, bei wenig Inhalt (sprich: es gibt keine Scrollbalken, der Content hat auch so Platz auf der Seite) 100% der Browserhöhe einnehmen. Wird der Inhalt jedoch länger und somit "größer" in Bezug auf die vertikale Ausdehnung gemessen in Pixel, so soll sich das DIV vergrößern und ebenfalls bis zum unteren Browserrand reichen. Ja klar, ein DIV wächst immer mit dem Inhalt, is schon klar. Aber die Struktur der Seite erfordert leider, dass mehrere DIVs ineinander verschachtelt sind.

    Der Aufbau der Seite war schon einmal komplizierter und beinhaltete 14 DIVs. Nun hab ich es, soweit wie möglich, reduziert auf die Gefahr hin, dass ich größere Hintergrundbilder benutzen muss um den Look der komplizierten Seite mit mehren DIVs hinzubekommen. Gut, darum solls hier aber auch gar nicht gehen. Ich poste jetzt einfach mal den HTML und CSS Code:


    *****CSS******
    @charset "UTF-8";
    /* CSS Document */

    * {
    margin: 0;
    padding: 0;
    }

    html {
    height: 100%;
    width: 100%;
    }

    body {
    height: 100%;
    width: 100%;
    background: url(img/grass.jpg);
    }


    div.topContainer {
    height: 100px;
    width:100%;
    background:#063;
    }

    div.topLine {
    height: 100%;
    width: 100%;
    float: left;
    margin-left: -150px;
    text-indent: 150px;
    }

    div.cornerCircle {
    float:right;
    width: 150px;
    background: #FF0000;
    height: 100%;
    }



    div.mainContainer {
    float:left;
    height: auto;
    min-height: 100%;
    background: #FFF;
    width: 100%;
    }

    div.menuContent {
    /*float:left;*/
    height: 100%;
    width: 880px;
    margin: 0 auto 0 auto;
    background: #333;
    text-align:center;
    }

    div.rightLine {
    float:right;
    height: auto;
    min-height: 100%;
    background:#00F;
    width: 150px;
    }





    *******HTML********

    <body>

    <!--<div class="wrap">-->


    <div class="topContainer">
    <div class="topLine">topLine</div>
    <div class="cornerCircle">cornerCircle</div>
    </div>


    <div class="mainContainer">
    <div class="menuContent">Menü und Content<br /><br />
    </div>
    </div>

    </body>









    Dieser Code bewirkt, dass alles perfekt dargestellt wird wenn maßig Content vorhanden ist, der über die (anfangs sichtbare) Seite "hinausgeht". Wenn aber wenig Content vorhanden ist, der nur wenige Zeilen lang ist, dann ist auch das entsprechende DIV "menuContent" nur ein paar Pixel hoch.

    Also, um nun zur Frage zu kommen: Gibt es einen vernünftigen Weg um die Eigenschaften "height:auto", "height:100%" und "min-height:100%" zu verknüpfen, ohne das eine die andere ausschließt?
    Würd ich das DIV mit dem Content nämlich auch "height: 100%" setzen, so würde es bei längerem Content einfach abgeschnitten werden (also das DIV an sich, nicht der Text der sich darin befindet). Wähle ich den Weg "height: auto" in Kombination mit "min-height: 100%" so wie in meinem obigen Code, so wird die min-height anscheinend völlig ignoriert!


    Weiß jemand Rat?


    PS: Puh war der Beitrag lang....
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV height Problemchen

    Das scheint mir ein Fall für Faux Columns zu sein.

  3. #3
    Unregistriert
    Gast

    Standard AW: DIV height Problemchen

    Tja, das war eigentlcih nicht das wonach ich suchte, aber ich musste dan letztendlich doch mit Fauxcolumns arbeiten

    Und zwar tat eine Mischung aus Fauxcolumns + footerStickAlt ihren Dienst!

Ähnliche Themen

  1. Magellan RoadMate 800 - Problemchen
    Von Thonixx im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 12.03.2008, 17:49
  2. Problemchen mit <div> Tag und PHP
    Von aroatrd im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 27.02.2007, 22:28
  3. Tabellen Problemchen...
    Von Chris1993 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 30.12.2006, 20:39
  4. Grafikkarten und andere Problemchen.
    Von at-clan im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 28.12.2005, 16:13
  5. css problemchen
    Von phore im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 02.12.2005, 12:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •