CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2320239
user2320239

Reputation: 1038

Sticky footer when Page is larger than screen height

I'm working on a project with a sidebar and in that side bar there i's like to have a sticky foot. The problem is the side bar scales to the height to the main page content. So if the main page content is bigger than the screen height, you end up with a big space under the footer if you scroll down the page.

I'd like the footer to stay at the bottom of the screen.

Hopefully my description makes sense.

.sidebar {
   height: 100%;
}

.card{
    display: flex;
    flex-direction: column;
    min-height: 90vh;
}

.card-body{
    flex: 1;
}

.footer{
 }
<div class="sidebar">
  <div class="card">
    <div class="card-header">TITLE</div>
    <div class="card-body">
      CONTENT
    </div>
  </div>
  <div class="footer">
    FEEDBACK CONTENT
  </div>
</div>

Upvotes: 0

Views: 1945

Answers (2)

R J
R J

Reputation: 505

check this example. it works css-tricks

html for this

<div class="content">
  <div class="content-inside">
    <h1>Sticky Footer with Negative Margin 2</h1>
    <p><button id="add">Add Content</button></p>
  </div>
</div>

<footer class="footer">
  Footer 
</footer>

css for this

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}

Upvotes: 0

pete otaqui
pete otaqui

Reputation: 1472

I would recommend flexbox and the vh CSS measurement.

This example will have the footer stuck to the bottom of the viewport, but will also allow the .sidebar to grow larger than the window height if required. So the .footer will be stuck to the bottom with small content in the .card and will move downwards (requiring scrolling to see) if the content in .card gets bigger.

body {
  margin: 0;
  padding: 0;
}
.sidebar {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.card {
  flex-grow: 1;
}
<html>
<body>
<div class="sidebar">
  <div class="card">
    <div class="card-header">TITLE</div>
    <div class="card-body">
      CONTENT
    </div>
  </div>
  <div class="footer">
    FEEDBACK CONTENT
  </div>
</div>
</body>
</html>

If you really want the .footer stuck to the bottom, even with a lot of contents in the .card, then you could try position: fixed. I've added more content in the .card here so that you can more easily see what happens when it is larger than the body (the body & card content scroll, but .footer is always stuck to the bottom of the viewport).

.card {
  /*
    .footer is out of the document flow,
    so make sure to leave enough space
    for it at the bottom of .card
  */
  margin-bottom: 1.6em;
}
.footer {
  /*
    here's the magic, fixed position
    at the bottom of the screen
  */
  position: fixed;
  bottom: 0;
  /*
    without a bg-color, this will get
    messed up with overflowing .card
    content
  */
  background-color: white;
  height: 1.6em;
}
<html>
<body>
  <div class="sidebar">
    <div class="card">
      <div class="card-header">TITLE</div>
      <div class="card-body">
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
      </div>
    </div>
    <div class="footer">
      FEEDBACK CONTENT
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions