• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

100% Höhe plus Footer am unteren Ende

P

paulkri89

Neues Mitglied
Hey Leute,

ich bastel an meiner ersten Homepage.
Ich habe darin einen Div, in dem immer die Inhalte stehen sollen. Diesen würde ich gerne bis zum Seitenende ziehen, wenn der Content, den Div nicht ausfüllt.
Leider funktioniert das nicht und ich wäre über Hilfe sehr dankbar.

Mein Style:
Code: 
html,body         {
            margin: 0;
            padding: 0;
            min-height: 100%; /* Mindesthöhe für moderne Browser */
            background-color: #FFFFFF;
            text-align: center;
           }

*html body    {
            height: 100%;
            }

/*Masterklasse Zentrierung*/
#mitte        {
            width: 980px;
            margin: 0 auto; 
            min-height: 100%;
            }

/* Div mit Content drinnen*/

#mainbox    {
            background-color: rgba(84,83,84,0.8);
            margin-top: 70px;
            padding-bottom: 40px;
            min-height: 100%; /* Mindesthöhe für moderne Browser */
            
            }

#footer         {
            
            height:14px; 
            margin-top:-14px;
            margin-bottom: 40px;
            }

Und mein Aufbau:

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" lang="de">

            <head>
                <title>meineersteseite.de - about</title>
                <link rel="stylesheet" type="text/css" href="style/style.css" />
                <link rel="shortcut icon" href="style/Favicon2.ico" type="image/x-icon" />
            </head>

            <body>
            
            <div id="mitte">
            <div id="mainbox">
            
            <h1>Überschrift</h1>
            
            <h2>Text usw...</h2>
            
            </div>
            </div>
            
            <div id="footer">
            <img src="style/Foot.png">
            </div>
    
           
           </body>

        </html>

Grüße Paul
 
Code: 
<!DOCTYPE HTML>

<html>
<head>
<style type="text/css">

* {
 margin: 0;
 padding: 0;
}
html,body {
 height: 100%; 
}

#mitte {
 width: 980px;
 margin: 0 auto; 
 min-height: 100%;
 margin-bottom:-14px;
 background:#ded;
}

#mainbox{
 background-color: rgba(84,83,84,0.8);
 padding: 40px;
}

#footer {
 height:14px; 
 width: 980px;
 margin: 0 auto; 
 background:url(style/Foot.png) repeat 0 0 #ddd;
}
</style>
<title>test</title>
</head>
<body>
            <div id="mitte">
            <div id="mainbox">
            
            <h1>Überschrift</h1>
            
            <h2>Text usw...</h2>
            
            </div>
            </div>
            
            <div id="footer">     
            </div>
    


</body>
</html>
 
Hey,
vielen Dank schon mal für die Antwort. Hat ne Weil gebraucht bis ich mir über meine nächsten Fragen klar wurde.

1. Wie hast du es hinbekommen, dass der Footer jetzt am unteren Ende klebt(also was ist der ausschlaggebende Code(Div) dafür???) und was bedeuten die zwei Nullen im #footer{background: ... 0 0 ...}?

2. Jetzt ist der Hintergrund der Box grau, aber geht nicht bis ganz nach unten, das habe ich durch Tricksen hinbekommen, in dem ich die Backgroundcolor des Bodys genauso gesetzt habe. Ich möchte aber über der Schrift noch Logo, Menü und Hintergrunddivs einbauen, deren Farbe nicht so sein soll, deswegen kann ich das nicht über die Bodycolor machen. Kennst du eine andere Möglichkeit, die Farbe bis nach unten zu ziehen?

3. Ich füge nochmal meine richtige Struktur rein, dachte es reichen die Divs, die die Menubox betreffen
Style:
Code: 
html,body         {
            margin: 0;
            padding: 0;
            text-align: center;*/
           }

*html body    {
            height: 100%;
            }

/*Masterklasse Zentrierung*/
#mitte        {
            width: 980px;
            margin: 0 auto; 
            min-height: 100%;
            margin-bottom: -14px;
            }


/* Hintergrundbild des Logos*/
#farbe    {
            margin: auto;
            background-image: url("Farbe.png");
            width: 960px; height: 523px;
            padding-top: 60px;
            background-repeat: no-repeat;
            position: relative;
            z-index: 5;
            }

/*Logo*/
div.logo     {
            margin: auto;
            background-image: url("WKS Logo mit Schriftzug.png");
            width:980px;height:200px;
            /*border:1px solid red;
            padding:20px;           */
            margin-top: -480px;
            background-repeat: no-repeat;
            position: static;
            z-index: 3;
            }

/*Facebook, Soundcloud und Youtube Buttons am linken Rand des Bildschirms*/
#face         {
            margin-top: 70px;
            margin-left: 0px:
            background-repeat: no-repeat;
            float: left;
            background-attachment: fixed;
            position: fixed;
            }

/*Navigationsmenü     */
#menu        {
            margin: auto;
            font-size: 1.5em;
            font-family: futura, arial, verdana, sans-serif;
            text-align: center;
            margin-top: 50px;
            position: relative;
            z-index: 6;
            }

/*Hauptbox für späteren Inhalt, Texte, Bilder usw.*/
#mainbox    {
            background-color: rgba(84,83,84,0.8);
            
            padding: 0;
                }

/*Schwarzer Streifen als Fußende soll unten kleben und mit Mainbox abschließen*/
#footer         {
            
            height:14px; 
            width: 980px;
            margin: 0 auto;
            background:url(style/Foot.png) repeat 0 0 #000000;
                        
            }

Die Struktur:
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" lang="de">

            <head>
                <title>Struktur der Webside</title>
                <link rel="stylesheet" type="text/css" href="style/style.css" />
                <link rel="shortcut icon" href="style/Favicon2.ico" type="image/x-icon" />
            </head>

            <body>
            
            
            <div id="mitte">
                     <div id="farbe"></div>
                     <div class="logo"></div>
            
            
                     <div id="menu">  
                              <a href="about.html" class="Menu" id="about">ABOUT</a>
               
                     </div>
            </div>

            <div id="face">
                                  <a href="https://soundcloud.com/"  title="Name on soundcloud" target="_blank";><img  src="style/sound2.png"></a>
                 <br />
            </div>    

            <div id="mitte">
                        <div id="mainbox">Inhalt...</div>
            </div>            

            <div id="footer"> </div>       
    
           
           </body>

        </html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben