Dehnung relativ div zu Fuß/Unterseite der Seite

Ich hatte viele Probleme, meine Fußzeile auf der Unterseite zu halten, wenn mein Hauptdiv kurz Inhalt ist. Aber ich habe es mit dem sticky footer trick behoben. Aber leider habe ich immer noch dieses Problem, bei dem sich mein Hauptdiv den ganzen Weg bis zur Fußzeile nicht erstreckt, wenn es inhaltlich knapp ist. Ich habe dies mit JS behoben, indem ich ein zusätzliches div in den leeren Raum eingefügt habe, wenn die untere Kante des Haupt-Div + die Fußzeile kleiner als das Viewport war. Aber das ist keine Option mehr, da ich nicht js-Benutzer unterstützen möchte.Dehnung relativ div zu Fuß/Unterseite der Seite

html, body { 
 
    height: 100%; 
 
    background-color: #678dae; 
 
    
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#wrap { 
 
    min-height: 100%; 
 
} 
 

 

 
#main { 
 
    
 
    width: 70%; 
 
    
 
    /* I need them to be centered like this because my div is being resized from time to time */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    
 
    overflow:auto; 
 
    padding-bottom: 150px; 
 
    background-color: #fff; 
 
    
 
} 
 

 

 
#footer {position: relative; 
 
\t margin-top: -150px; /* negative value of footer height */ 
 
\t height: 150px; 
 
    background-color: #333; 
 
\t clear:both; 
 
}

<div id="wrap"> 
 

 
\t <div id="main"> 
 

 
\t \t <div id="content"> 
 
      <p>Div content</p> 
 
      
 
      
 
      <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->  
 
      
 
     
 
\t \t </div> \t 
 

 
\t </div> 
 

 
</div> 
 

 
<div id="footer"> 
 
<p>Footer content</p> 
 
</div>

Quelle

2016-04-16 Johan Sundman

Mögliches Duplikat von [CSS in HTML Fußleiste Aufenthalt im unteren Bereich der Seite mit einer Mindesthöhe machen] (http://stackoverflow.com/ questions/643879/css-to-make-html-Seitenfuß-Stay-at-bottom-der-Seite-mit-einer-Mindesthöhe – noahnu

Bitte versuchen Sie dies:

#footer { 
    background-color: #333; 
    bottom: 0; 
    height: 150px; 
    position: absolute; 
    width: 100%; 
}

Quelle

2016-04-16 19:29:43 satya

Die Fußzeile ist bereits dort, wo es sein sollte und das würde erstellen Probleme, wenn mehr Inhalt als das Ansichtsfenster passt –

html, body { 
 
    height: 100%; 
 
    background-color: #678dae; 
 
    
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#wrap { 
 
    min-height: 100%; 
 
} 
 

 

 
#main { 
 
    
 
    width: 70%; 
 
    
 
    /* I need them to be centered like this because my div is being resized from time to time */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    
 
    overflow:auto; 
 
    padding-bottom: 150px; 
 
    background-color: #fff; 
 
    
 
} 
 

 

 
#footer { 
 
    position: fixed; 
 
\t margin-top: -150px; /* negative value of footer height */ 
 
\t height: 25px; 
 
    background-color: #333; 
 
    bottom:0; 
 
    width:100%; 
 
}

<div id="wrap"> 
 

 
\t <div id="main"> 
 

 
\t \t <div id="content"> 
 
      <p>Div content</p> 
 
      
 
      
 
      <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->  
 
      
 
     
 
\t \t </div> \t 
 

 
\t </div> 
 

 
</div> 
 

 
<div id="footer"> 
 
<p>Footer content</p> 
 
</div>

ich einige Footer Eigenschaften

geändert haben

Quelle

2016-04-16 19:30:19

height: inherit; kann helfen .. dies in der Regel mit der Höhe Aspekten hilft ...

Quelle

2016-04-16 19:52:15 Jylaw38

Dehnung relativ div zu Fuß/Unterseite der Seite

Antwort

Verwandte Themen