Wie Fußzeile zwischen 2 Divs positionieren?

Also spiele ich nur herum und versuche, ein 3-Spalten-Layout zu erstellen. Ich habe Probleme, die Fußzeile zwischen diesen 2 divs Seitenleisten an der Unterseite gehen zu lassen. Im Grunde geht meine mittlere Spalte nicht ganz nach unten wie meine Seitenleisten, meine mittlere Spalte schneidet ab, so dass ich die Fußzeile direkt darunter platzieren kann und sie passt zu meinen Seitenleisten. Margin-left ist etwas, von dem ich weiß, dass ich es kann, aber ich möchte das nicht tun, weil ich glaube, dass es einen besseren Weg gibt.Wie Fußzeile zwischen 2 Divs positionieren?

Hier ist, was ich

<!DOCTYPE html> 
<html> 
<head> 
    <title>First</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <header></header> 

    <div id="first-column"></div> 

    <div id="middle-column"></div> 

    <div id="third-column"></div> 

    <footer></footer> 

</body> 
</html>

css

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

header { 
    background-color: #444444; 
    width: 100%; 
    height: 20%; 
} 

#first-column { 
    width: 15%; 
    height: 80%; 
    background-color: #d8d8d8; 
    float: left; 
} 

#middle-column { 
    width: 70%; 
    height: 70%; 
    float: left; 
    background-color: red; 
} 

#third-column { 
    width: 15%; 
    height: 80%; 
    background-color: #d8d8d8; 
    float: left; 
} 

footer { 
    background-color: #222222; 
    height: 10%; 
    width: 70%; 
    position: absolute; 
    bottom: 0; 
    margin-left: 100px; 
}

Quelle

2016-05-17 Dominic

so weit haben, gibt es eine Reihe von Möglichkeiten, dies zu lösen. die grundlegendste Änderung, die Sie tun können, um dieses Layout zu arbeiten:

Ihre linken Spalten width ist auf 15% festgelegt. Wenn Sie die Fußzeile margin-left von 100px zu 15% ändern, werden sie alle aufgereiht sein.

https://jsfiddle.net/7ufL979v/

Quelle

2016-05-17 20:46:59 danyamachine

Vielen Dank, dass Sie gearbeitet haben, über das Denken hier. – Dominic

Wenn Sie margin-left nicht verwenden möchten, wie Sie erwähnen, können Sie die dritte Spalte rechts statt schweben und Sie werden in der Lage sein, Ihre Fußzeile wie die anderen Boxen zu schweben (wenn Sie auch Entfernen Sie position: absolute und margin-left).

#third-column { 
    width: 15%; 
    height: 80%; 
    background-color: #d8d8d8; 
    float: right; 
} 

footer { 
    background-color: #222222; 
    height: 10%; 
    width: 70%; 
    bottom: 0; 
    float: left; 
}

Sie können auch in using flexbox aussehen wollen, was ein moderner Weg, dies zu lösen, und ist eigentlich das Layout zu erzeugen gebaut, im Gegensatz zu Floating-Box links und rechts.

Quelle

2016-05-17 20:51:27

Sie könnten es einfach in die mittlere Spalte, ganz unten setzen.

Quelle

2016-05-17 20:56:03 Johannes

Wie Fußzeile zwischen 2 Divs positionieren?

Antwort

Verwandte Themen