CSS Div soll restliche Höhe einnehmen

D

Dawen

0
Hallo !

Ich habe den folgenden Code :

PHP: 
<div id="content">
   <div id="header"></div>
   <div id="menu"></div>
   <div class="wrap">
           <div id="text"></div>
   </div>
   <div id="splitter"></div>
</div>
<div id="footer"></div>
HTML: 
#content{
    height: auto !important;    margin: 0 auto -120px;    min-height: 100%;
}

#header {   
 background-image: url(....);
 border-bottom: 1px solid #999999;    
 overflow: hidden;
}
#menu{
    background-color: #0171AB;    
    border-bottom: 5px solid #F1F1F1;    
    height: 68px;    
    overflow: hidden;
}

.wrap {    
    margin-left: auto;    
    margin-right: auto;    
    width: 980px;
}
#text {
    margin-left: auto;    
    margin-right: auto;   
    overflow: hidden;    
    padding-top: 10px;    
    width: 980px;
    margin-bottom: 15px;
}

#footer, #splitter{
    clear: both;
    height: 119px;    
    margin: 0 auto;
}

#footer {    
   background: none repeat scroll 0 0 white;    
   border-top: 1px solid #E4E4E4;    
   bottom: 0;
   text-align: center;    
   width: 980px;
}
Im div text soll der Inhalt rein. Unten ist der Footer fixiert. Ich hätte nun gerne, dass das div text die volle restliche Höhe einnimmt. Wie kann ich das machen ?

Wenn z.B. nur ein oder zwei Zeilen Text vorhanden sind, dann soll der div trotzdem komplett die Höhe annehmen, die zur Verfügung steht.
 
Meinst du mit volle restliche Höhe, dass sich der Bereich über die ganze Seite ausdehnt ?
 
ich bin auch blutiger Anfänger und schlag mich mit ähnlichen Problemen rum. Falls du das wirklich begreifen willst, bleibt dir wohl nichts anderes übrig als weiterzulernen. Wäre schön, wenn´s einen gäb, der´s einem vorkaut.
Schau dich mal auf´m bord um, dann merkst schnell, daß die Frage zu einfach für hier ist.
 
Die Antwort ist in der Tat nicht ganz einfach. Aber ich hab hier mal die wichtigsten Dinge extrahiert.

Das Script dient nur dazu, um viel und wenig Text im div anzuzeigen. Wie Cross-Browser verträglich das ganze ist? Keine Ahnung, selber testen. Aber in meinem FF funktionierts. Achja, das ganze ist nicht ganz perfekt, im Moment kanns passieren, dass der Content unter den Footer rutscht, aber das sollte dann ja kein Problem mehr sein. :)

Test it!

fixedftr.png


HTML: 
<!DOCTYPE html>
<head>

    <!-- meta -->
    <title>habotest - min height</title>
    <meta charset="utf-8" />
    
    <!-- ressources -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <style>
    
    /** fixed footer & min height */
    
    * {
        margin:0px;
        padding:0px;
    }
    
    body, html {
        height:100%;
        min-height:100%;
        position:relative;
    }
    
    section#body {
        height:auto;
        width:800px;
        margin:auto;
        min-height:100%;
    }
    
    footer {
        width:100%;
        position:relative;
        margin-top:-50px;
        line-height:50px;
        bottom:0px;
        height:50px;
    }
    
    /** style */
    
    section#body {
        background-color:red;
    }
    
    footer {
        background-color:green;
    }
    
    </style>
    
    <!-- content load -->
    <script type="text/javascript">
        
        $(document).ready(function()
        {
            $('#body').click(function()
            {
                var html = $(this).html();
                var oldh = ' body text';
            
                if(html.length < 13)
                {
                    for(i = 0; i < 1000; i ++)
                    {
                        html += oldh
                    }
                    
                    $(this).html(html);
                }
                else
                {
                    $(this).html(oldh);
                }
            });
        })
        
    </script>
</head>
<body>

<section id="body">
    body text
</section>

<footer>
    footertext
</footer>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben