Footer crawls out of the edges, how to solve?

A

artem2020-07-08 18:14:41

css

artem, 2020-07-08 18:14:41

When filling with content, everything is getting better and does not pop out when it is reduced.

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

A

artem, 2020-07-09
@arteqrt

DECISION!

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

header{
   flex: 0 0 auto;
}
.main-content{
   flex: 1 0 auto;
}
footer{
   flex: 0 0 auto;
}

D

drawnofmymind, 2020-07-08
@drawnofmymind

footer to container

A

Alexey Nemirov, 2020-07-08
@Sedov1988

The first div is most likely a wrapper that defines the borders. The basement, most likely, was not placed there.
If the footer is highlighted correctly with the footer tag, just add a class to it with the name of the wrapper, or place it inside the tag. Or better yet, show the full code. To say for sure.

D

Dmitry, 2020-07-08
@castleJQ

You can do it this way: https://codepen.io/castlejq/pen/ZEQoeyR
Wrap the content in classes with specific styles (sizes).
If you don't want to spend time on this, you can try bootstrap . And advice to you, try not to use id="" unnecessarily in your code, replace them with class="".