CODEWITHSUNDEEP
htmlcss
Hexley21
Hexley21

Reputation: 664

How to keep footer down with position absolute

I am very frustrated with this all, I never had such an easy and annoying and at the same time difficult problem
i can't set the footer element at the end of the site.
I need to keep this footer at the down of the site, and it shouldn't override the main content.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="styles.css" rel="stylesheet" type="text/css"/>
    <title>ARL</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <header>
        <h1 class="header-title">
            Need a good coder? contact us!
        </h1>
    </header>
    <main>
        <section class="main-section">
            <div class="team">
                <h3 class="team-manager">
                    our general manager, Pavel
                </h3>
                <img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
                <div class="container">
                    <ul>
                        <li>Members</li>
                        <ul>
                            <li>Aleksandr</li>
                            <li>Ruslan</li>
                            <li>Leonard</li>
                        </ul>
                    </ul>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="contacts">
            <p>
            call us: 5555555555 
            </p>
            <a class="link" href="https://www.facebook.com" target= "_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png"/></a>
            <a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
            <a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png"/></a>
            <a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
        </div>
    </footer>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap');
html{
    scroll-behavior: smooth;
}
body{
    margin: 0;
   padding: 0;
   height: 100%;
    background:#221F1F;
    color: white;
    font-family: monospace;
}
header{
    background: #F65314;
    box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.75);
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: darkslategray;
    font-size: 25px;
    font-style:oblique;
    font-weight: 100;
}
main{
    min-height: 100vh;
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 100px;
    display: block;
}
.main-section{
    position: relative;
    max-width: 1750px;
    display: block;
    margin: auto;
    margin-top: 175px;
}.main-section img{
    width: 385px;
}
.team{
    position: relative;
    margin-left: 5%;
}
.team-manager{
    position: relative;
    color: #F65314;
    font-size: 25px;
    font-style: italic;
}
.container{
    position: relative;
    font-size: 40px;
    border: 5px solid #F65314;
    width: 385px;
}
.container ul{
    position: relative;
    list-style: none;
}
.container ul li{
    position: relative;
    color: gray;
}
.container ul ul li{
    position: relative;
    margin-left: -40px;
    line-height: 60px;
    color: white;
}
.container ul ul{
    position: relative;
    margin-top: 35px;
}
footer{
    bottom: 0;
    width: 100%;
    height: 100px;
    position: absolute;
    background: #303030;
}
.contacts{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    width: 400px;
}
.contacts p{
    font-size: 20px;
}
.link img{
    width: 35px;
    border-radius: 5px;
}

Here are some images, I have no idea how to deal with this
https://ibb.co/ssvBMQJ
https://ibb.co/hL9JLvv
https://ibb.co/HHgVKbc
(I don't need to make the footer element position: fixed;, i need to make average footer, which doesn't override the main content, and nested always at the bottom of the page)

Upvotes: 2

Views: 77

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

you need to add position: relative to the body and bottom: -100px in footer tag css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap');
html{
    scroll-behavior: smooth;
}
body{
    margin: 0;
   padding: 0;
   height: 100%;
    background:#221F1F;
    color: white;
    font-family: monospace;
    position: relative;
}
header{
    background: #F65314;
    box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.75);
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: darkslategray;
    font-size: 25px;
    font-style:oblique;
    font-weight: 100;
}
main{
    min-height: 100vh;
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 100px;
    display: block;
}
.main-section{
    position: relative;
    max-width: 1750px;
    display: block;
    margin: auto;
    margin-top: 175px;
}.main-section img{
    width: 385px;
}
.team{
    position: relative;
    margin-left: 5%;
}
.team-manager{
    position: relative;
    color: #F65314;
    font-size: 25px;
    font-style: italic;
}
.container{
    position: relative;
    font-size: 40px;
    border: 5px solid #F65314;
    width: 385px;
}
.container ul{
    position: relative;
    list-style: none;
}
.container ul li{
    position: relative;
    color: gray;
}
.container ul ul li{
    position: relative;
    margin-left: -40px;
    line-height: 60px;
    color: white;
}
.container ul ul{
    position: relative;
    margin-top: 35px;
}
footer{
    bottom: -100px;
    width: 100%;
    height: 100px;
    position: absolute;
    background: #303030;
}
.contacts{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    width: 400px;
}
.contacts p{
    font-size: 20px;
}
.link img{
    width: 35px;
    border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="styles.css" rel="stylesheet" type="text/css"/>
    <title>ARL</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <header>
        <h1 class="header-title">
            Need a good coder? contact us!
        </h1>
    </header>
    <main>
        <section class="main-section">
            <div class="team">
                <h3 class="team-manager">
                    our general manager, Pavel
                </h3>
                <img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
                <div class="container">
                    <ul>
                        <li>Members</li>
                        <ul>
                            <li>Aleksandr</li>
                            <li>Ruslan</li>
                            <li>Leonard</li>
                        </ul>
                    </ul>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="contacts">
            <p>
            call us: 5555555555 
            </p>
            <a class="link" href="https://www.facebook.com" target= "_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png"/></a>
            <a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
            <a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png"/></a>
            <a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
        </div>
    </footer>
</body>
</html>

Upvotes: 0

shreyasm-dev
shreyasm-dev

Reputation: 2834

Just remove bottom: 0 on footer, like this:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #221F1F;
  color: white;
  font-family: monospace;
}

header {
  background: #F65314;
  box-shadow: 0px 11px 26px 0px rgba(0, 0, 0, 0.75);
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: darkslategray;
  font-size: 25px;
  font-style: oblique;
  font-weight: 100;
}

main {
  min-height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
  padding-bottom: 100px;
  display: block;
}

.main-section {
  position: relative;
  max-width: 1750px;
  display: block;
  margin: auto;
  margin-top: 175px;
}

.main-section img {
  width: 385px;
}

.team {
  position: relative;
  margin-left: 5%;
}

.team-manager {
  position: relative;
  color: #F65314;
  font-size: 25px;
  font-style: italic;
}

.container {
  position: relative;
  font-size: 40px;
  border: 5px solid #F65314;
  width: 385px;
}

.container ul {
  position: relative;
  list-style: none;
}

.container ul li {
  position: relative;
  color: gray;
}

.container ul ul li {
  position: relative;
  margin-left: -40px;
  line-height: 60px;
  color: white;
}

.container ul ul {
  position: relative;
  margin-top: 35px;
}

footer {
  width: 100%;
  height: 100px;
  position: absolute;
  background: #303030;
}

.contacts {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  width: 400px;
}

.contacts p {
  font-size: 20px;
}

.link img {
  width: 35px;
  border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <title>ARL</title>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    <header>
      <h1 class="header-title">
        Need a good coder? contact us!
      </h1>
    </header>
    <main>
      <section class="main-section">
        <div class="team">
          <h3 class="team-manager">
            our general manager, Pavel
          </h3>
          <img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
          <div class="container">
            <ul>
              <li>Members</li>
              <ul>
                <li>Aleksandr</li>
                <li>Ruslan</li>
                <li>Leonard</li>
              </ul>
            </ul>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <div class="contacts">
        <p>
          call us: 5555555555
        </p>
        <a class="link" href="https://www.facebook.com" target="_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png" /></a>
        <a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
        <a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png" /></a>
        <a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
      </div>
    </footer>
  </body>

</html>

Upvotes: 1

Related Questions