Footer sits in the middle of the page and doesn’t move anywhere. Please tell me what is the problem?
Answer 1, authority 100%
If you want to make sure that the footer is always at the bottom of the browser window, despite the fact that there is not enough content on the page, you can use this code:
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
}
main {
padding-bottom: 100px;
/ * Footer height * /
}
footer {
margin-top: -100px;
/ * Minus Footer Height * /
height: 100px;
/ * Footer height * /
} & lt; div id = "wrap" & gt;
& lt; header & gt;
& lt; p & gt; Header content & lt; / p & gt;
& lt; / header & gt;
& lt; main & gt;
& lt; p & gt; Main content & lt; / p & gt;
& lt; / main & gt;
& lt; / div & gt;
& lt; footer & gt;
& lt; p & gt; Footer content & lt; / p & gt;
& lt; / footer & gt; Answer 2, authority 92%
You can press it using flexbox, then the height of the footer can be different, and the layout is accordingly adaptive:
* {
margin: 0; / * this property can be removed if you use reset, normalize or something similar * /
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
padding: 1rem; / * this property can be removed, added for clarity * /
background: # e6f2ff; / * this property can be removed, added for clarity * /
}
footer {
flex: 0 0 auto;
padding: 1rem; / * this property can be removed, added for clarity * /
background: # e6ffe6; / * this property can be removed, added for clarity * /
} & lt; body & gt;
& lt; div class = "content" & gt; content & lt; / div & gt;
& lt; footer & gt; footer & lt; / footer & gt;
& lt; / body & gt; Answer 3
Tried doing it in various ways.
In case there is not much content, the footer can indeed be fixed at the bottom of the page.
But when the context does not fit on the page, the footer still “squeezes” off the bottom of the page.
Solved it this way:
HTML
& lt;! doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Test page & lt; / title & gt;
& lt; link href = "Test.css" rel = "stylesheet" type = "text / css" & gt;
& lt; / head & gt;
& lt; div class = "wrap" & gt;
& lt; div class = "header" & gt;
& lt; / div & gt;
& lt; div class = "content" & gt;
& lt; p & gt;
Long text needs to be placed here
& lt; / p & gt;
& lt; / div & gt;
& lt; div class = "footer" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; body & gt;
& lt; / body & gt;
& lt; / html & gt;
CSS
@ charset "utf-8";
/ * CSS Document * /
* {
margin: 0; / * Reset browser settings * /
}
.wrap {
position: fixed; / * Detach the container from the page and fix it in the browser window * /
width: 100%; / * Width for the entire browser window * /
height: 100%; / * Height for the entire browser window * /
background-color: pink;
display: flex; / * Turn the container into a flexBox * /
flex-direction: column; / * Arrange the children vertically * /
}
.header {
height: 32px;
background-color: burlywood;
flex-grow: 0; / * Forbid to grow * /
flex-shrink: 0; / * Prohibit shrinking * /
flex-basis: auto;
}
.content {
background-color: aliceblue;
overflow-y: auto; / * Vertical scrollbar for text * /
padding: 10px; / * text indent on all sides * /
text-align: justify; / * align text to the left and right * /
flex-grow: 1; / * We instruct to occupy all free space * /
}
.footer {
height: 32px;
background-color: cadetblue;
flex-grow: 0; / * Forbid to grow * /
flex-shrink: 0; / * Prohibit shrinking * /
flex-basis: auto;
}