Fixed div am unteren Rand versteckt anderen Inhalt

Question

Ich habe eine Div erstellt und das ist nach unten festgelegt. Problem ist es, Daten der HTML-Seite zu verstecken.

Hier ist die Geige.

#footer { 
 
     position: fixed; 
 
     bottom: 0; 
 
     width: 100%; 
 
    } 
 

 
    /* For the demo only */ 
 
    #content { 
 
     background: #D0E5FF; 
 
     padding: 20px; 
 
     color: #00214B; 
 
     font-family: sans-serif; 
 
     font-weight: bold; 
 
     font-size: 14px; 
 
     line-height: 1.8; 
 
    } 
 
    #footer { 
 
     background: #0070FF; 
 
     line-height: 2; 
 
     text-align: center; 
 
     color: #042E64; 
 
     font-size: 30px; 
 
     font-family: sans-serif; 
 
     font-weight: bold; 
 
     text-shadow: 0 1px 0 #84BAFF; 
 
     box-shadow: 0 0 15px #00214B 
 
    }

<div id="content"> 
 
    1) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    2) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    
 
    
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    6) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
     1) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    2) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    
 
    
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    6) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    </div> 
 
<div id="footer">Footer - Just scroll...</div>

Bitte beraten, wie die Daten zeigen, die sich hinter dem festen div ist.

Answer 1

Sie Marge oder padding zum Inhalt hinzufügen können die Fußzeile Höhe anzupassen.

Dies funktioniert am besten, wenn Sie die Höhe der Fußzeile selbst kennen. Sie könnten das Padding dynamisch mit JavaScript aktualisieren, wenn Sie es vorher nicht kennen.

Der Grund, es funktioniert, ist, dass es Raum unter dem Gehalt in dem fließt normale Element schafft. Wenn die Fußzeile als fest positioniert ist, wird aus diesem normalen Fluss genommen und daher müssen Sie für seine Dimensionen aufnehmen, um zu verhindern, dass der Inhalt im normalen Fluss ausgeblendet wird.

Padding vs Margin

Sie können auch margin-bottom verwenden Sie den Raum zu schaffen. Der Unterschied ist, dass mit padding Sie den Raum innerhalb der Inhalt div erstellen, so wird der Hintergrund unterhalb der Fußzeile fließen. Mit margin erstellen Sie Platz nach dem div und der Hintergrund wird vor der Fußzeile "enden".

Voll Code-Schnipsel

#footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
/* For the demo only */ 
 
#content { 
 
    background: #D0E5FF; 
 
    padding: 20px; 
 
    color: #00214B; 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    line-height: 1.8; 
 
} 
 
#footer { 
 
    background: #0070FF; 
 
    line-height: 2; 
 
    text-align: center; 
 
    color: #042E64; 
 
    font-size: 30px; 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    text-shadow: 0 1px 0 #84BAFF; 
 
    box-shadow: 0 0 15px #00214B 
 
} 
 

 
#content { 
 
    padding-bottom: 100px; /* accomodate for the footer height */ 
 
}

<div id="content"> 
 
    1) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    2) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    
 
    
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    6) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
     1) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    2) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    
 
    
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    6) Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    Lorum Ipsum Dolor Sit Amet<br /> 
 
    </div> 
 
<div id="footer">Footer - Just scroll...</div>

Answer 2

Sie können unter CSS für diese verwenden:

body { 
    padding-bottom: 60px; 
} 

Answer 3

Sets unterer Rand für Ihre Inhalte div

#content { 
background: #d0e5ff none repeat scroll 0 0; 
color: #00214b; 
font-family: sans-serif; 
font-size: 14px; 
font-weight: bold; 
line-height: 1.8; 
margin-bottom: 60px;/*Add this*/ 
padding: 20px; 
} 

Answer 4

basierend Antworten auf Marge oder padding sollte funktionieren, aber es ist ein wenig Hack-ish und ich würde mich nicht darauf verlassen wollen, dass es in allen Browsern funktioniert. Beachten Sie auch, dass die rechte Bildlaufleiste auch dann, wenn sie funktioniert, bis zur Fußzeile reicht. Dies ist eine irreführende Benutzeroberfläche, da die Fußzeile nicht gescrollt wird.

Die bessere Lösung besteht darin, eine Höhe für den Inhalt div anzugeben und overflow-y auf auto zu setzen. Die Angabe der Höhe ist der knifflige Teil ...

Wenn Sie neu genug CSS verwenden, ist Flexbox dafür gut.

Wenn Sie nicht in der Lage sind, flexbox zu verwenden, würde ich versuchen, die Höhe jedes Div auf einen Bruchteil des Viewports zu skalieren - d. H. 90vh für den Inhalt und 10vh für die Fußzeile. Dies funktioniert am besten, wenn Sie auch die Größe in der Fußzeile dynamisch anpassen können.

Wenn Sie keine vh-Einheiten für die Fußzeile verwenden können, verwendete ich immer JavaScript, um die Größe der Fußzeile zu berechnen, diese von der Höhe des Ansichtsfensters zu subtrahieren und die Höhe des Inhalts festzulegen entsprechend. Es ist hässlich, JavaScript in das Layout zu integrieren, aber Pre-Flexbox ist manchmal das, was benötigt wurde.