So erstellen Sie eine relativ positionierte Fußzeile

Question

Ich möchte Fußzeile wie alle anderen Fußzeilen machen. Tiefer Boden und bleibt dort. Auf der anderen Seite möchte ich, dass seine Oberseite je nach Position des div.content erweiterbar ist. Es könnte ein konstanter Wert wie 10px sein. Wenn div.content also nach oben bewegt wird, bewegt es sich zu (und behält dabei den unteren Bildschirmrand als Fußzeile bei). Wie kann ich das machen?

.main { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.content { 
 
    position: relative; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
} 
 
.left-content { 
 
    float: left; 
 
    margin: 2.27272727272727%; 
 
    /* 20/880 = 0.0227272727272727 */ 
 
    width: 56.81818181818182%; 
 
    /* 500/880 = 0.5681818181818182 */ 
 
    background-color: aquamarine; 
 
} 
 
.right-content { 
 
    float: left; 
 
    margin: 2.27272727272727%; 
 
    /* 20/880 = 0.0227272727272727 */ 
 
    width: 34.09090909090909%; 
 
    /* 300/880 = 0.3409090909090909 */ 
 
    background-color: mediumturquoise; 
 
} 
 
.inner-content { 
 
    float: left; 
 
    margin: 2%; 
 
    /* 10/500 = 0.02 */ 
 
    width: 44%; 
 
    /* 220/500 = 0.44 */ 
 
    background-color: darkgreen; 
 
} 
 
.footer { 
 
    clear: both; 
 
    height: 10%; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    position: absolute; 
 
    background-color: darkcyan; 
 
}

<div class="main"> 
 
    <div class="content"> 
 
    <div class="left-content"> 
 
     <h1>A</h1> 
 
     <p>asd</p> 
 
     <p>asd</p> 
 
     <p>asd</p> 
 
     <p>asd</p> 
 
     <p>asd</p> 
 
     <div class="inner-content"> 
 
     <h1>D</h1> 
 
     </div> 
 
     <div class="inner-content"> 
 
     <h1>D</h1> 
 
     </div> 
 
    </div> 
 
    <div class="right-content"> 
 
     <h1>B</h1> 
 
     <p>asd</p> 
 
     <p>asd</p> 
 

 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
    <h1>C</h1> 
 
    </div> 
 
</div>

Answer 1

Wenn ich Ihre Frage richtig verstanden habe, wollen Sie die Fußzeile auf der Unterseite des Bildschirms zu halten, egal was. Richtig?

Fügen Sie dazu Ihrer Fußzeilenklasse Folgendes hinzu:

position: fixed; 
    bottom: 0;