CODEWITHSUNDEEP
htmlcss
stevew1
stevew1

Reputation: 55

Show footer at the bottom of the page even if there is not enough content

I tried to display the footer at the bottom of the page even if there is no content and it seems to work. However, you have to scroll to see the footer. It’s right after you scroll and not on the bottom of the page right away. I can’t figure out what I am doing wrong. Here is my code:

<body>
    <div id="root">
        <div class="app">
            <div class="wrapper">
                <div class="nav">
                    <div>
                        <header class="header">
                            <div>
                                <ul>
                                    <li>Title</li>
                                </ul>
                            </div>
                            <div>
                                <ul>
                                    <li>About</li>
                                </ul>
                            </div>
                        </header>
                    </div>
                </div>
            </div>
            <div class="footerWrap">
                <div>
                    <footer>
                        <div class="copyright">
                            <div class="text">© 2018 Footer</div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</body>

styles:

html, body, #root, .app {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
.footerWrap {
    background-color: green;
    padding-top: 15px;
    width: 100%;
}

Upvotes: 5

Views: 5002

Answers (5)

SA Hashemi
SA Hashemi

Reputation: 1

body{
    min-height:100vh;
    margin:0;
    padding:0;
}
header,
footer{
    min-height:40px;
    background-color:#eee;
}
body > main{
    min-height:calc(100vh - 80px);
}
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

Upvotes: 0

cela
cela

Reputation: 2500

This should make the footer appear always at the bottom of the page. We make the footer wrapper have position: absolute and use bottom: 0 to push it to the bottom. left: 0 removes the horizontal scrollbar.

html {
    position: relative;
    min-height: 100%;
}
.footerWrap {
    position: absolute;
    background-color: green;
    width: 100%;
    bottom: 0;
    left: 0;
}
<html>
<div class="footerWrap">Footer Here</div>
</html>

I stripped out all the excess divs to make it easier to read.

Upvotes: 8

Mou Niir
Mou Niir

Reputation: 21

<body>
  <div id="root">
    <div class="app">
      <div class="wrapper">
        <div class="nav">
          <div>
            <header class="header">
              <div>
                <ul>
                  <li>Title</li>
                </ul>
              </div>
              <div>
                <ul>
                  <li>About</li>
                </ul>
              </div>
            </header>
          </div>
        </div>
      </div>
      <div class="footer">
        <div>
          <footer>
            <div class="copyright">
              <div class="text">© 2018 Footer</div>
            </div>
          </footer>
        </div>
      </div>
    </div>
  </div>
</body>

<style>
*{ list-style: none; color: #fff; padding: 0; margin: 0; } .header{ background-color: #333; height: 70px; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; } .footer{ position: absolute; bottom: 0; height:
70px; width: 100vw; background-color:#333; display: flex; align-items: center; justify-content: center; }

</style>

Upvotes: 0

Perry2008084
Perry2008084

Reputation: 956

You can try the flex layout method.

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

.Site {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
}

.Site-content {
   flex: 1;
}

Upvotes: 4

Darshit Jain
Darshit Jain

Reputation: 27

Get the height of the window (say w) and height of your footer (say f ). Then set minimum height of your content box to (w-f). That way footer will always appear at bottom if there is no content and will appear after content if there is any.

Upvotes: 0

Related Questions