Hackerboard Wiki HaboBlog
Hackerboard bei Facebook Hackerboard bei Google+ Hackerboard bei Twitter

[HaBo]

 
(Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI...

Div soll restliche Höhe einnehmen

Diskussion: Div soll restliche Höhe einnehmen im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Anzeige Hallo ! Ich habe den folgenden Code : PHP-Code: < div id = "content" >    < div id = "header" ></ ...
Antwort
Themen-Optionen Ansicht
   
Alt 10.09.11, 00:13   #1 (permalink)
 
Registriert seit: 19.08.04
Dawen Leistung: Addierstift
Likes: 1
Standard Div soll restliche Höhe einnehmen
Anzeige

Hallo !

Ich habe den folgenden Code :

PHP-Code:
<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-Code:
#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.
Dawen ist offline   Mit Zitat antworten
Alt 10.09.11, 00:24   #2 (permalink)
 
Benutzerbild von overflow
 
Registriert seit: 17.01.04
overflow Leistung: Z3
overflow eine Nachricht über ICQ schicken overflow eine Nachricht über MSN schicken
Likes: 17
Standard
Meinst du mit volle restliche Höhe, dass sich der Bereich über die ganze Seite ausdehnt ?
overflow ist offline   Mit Zitat antworten
   
HaBOT
 
- Anzeige -

Werbung ist gerade online    
Alt 10.09.11, 10:47   #3 (permalink)
 
Registriert seit: 10.04.11
anita Leistung: Facit NTK
Likes: 2
Standard
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.
anita ist offline   Mit Zitat antworten
Alt 11.09.11, 10:50   #4 (permalink)
 
Benutzerbild von she3p
 
Registriert seit: 07.05.07
she3p Leistung: 8086
Likes: 19
Standard
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!



meep   
HTML-Code:
<!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>
__________________
she3p ist offline   Mit Zitat antworten
Alt 26.09.11, 10:32   #5 (permalink)
 
Registriert seit: 10.04.11
anita Leistung: Facit NTK
Likes: 2
Standard
@she3p: danke für die Mühe
@Dawen: sorry, wg. Ungeduld
anita ist offline   Mit Zitat antworten
Antwort
   
- Anzeige -

Werbung ist gerade online    

[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » CSS Div soll restliche Höhe einnehmen
« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind aus
Pingbacks sind aus
Refbacks sind aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
PHP Wie erkennen das div-Höhe überschritten wird? ghost (Web-) Design und webbasierte Sprachen 4 27.02.11 21:31
CSS 3 Divs mit gleicher Höhe reaLInsanity (Web-) Design und webbasierte Sprachen 4 18.09.10 19:10
Div auf voller Höhe Dawen Code Kitchen 3 20.07.10 20:22
Höhe von AmShaegar (Web-) Design und webbasierte Sprachen 8 11.10.08 17:33
was soll das `???? ikickyou Die Problemzone 3 23.10.03 10:28

Alle Zeitangaben in WEZ +2. Es ist jetzt 22:25 Uhr.
vBulletin® v3.8.7, Copyright ©2000-2012, vBulletin Solutions, Inc.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61