Add footer to page with no scroll

Question

How do i add a footer to the code that always is at the bottom? It should still not be possible to scroll besides the scroll in the left div. The footer should fill the entire width of the page.

CSS

.Top {
    display: flex;
    position: relative;
    z-index: 10;
    height: 80px;
}

.Container {
    display: flex;
    overflow: hidden;
    height: 100vh;
    margin-top: -100px;
    padding-top: 100px;
    position: relative;
    width: 100%;
    backface-visibility: hidden;
    will-change: overflow;
}

.Left,
.Right {
    overflow: auto;
    height: auto; 
}

.Left {
    width: 65%;
    overflow: auto;
    line-height: 18px;
    padding: 0 15px 90px 15px;
}

.Right {
    width: 35%;
}

HTML

<div class="Top"></div>

<div class="Container">
<div class="Left"></div>
<div class="right"></div>
</div>

Have you thought about using position:fixed;bottom:0;left:0;right:0; — David Chelliah, Jun 05 '16 at 12:35

score 2 · Answer 1 · answered Jun 05 '16 at 13:03

Try to use Bootstrap for this instead of writing own CSS classes. That will make your life easier. The following example will give you the solution.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
</div>

Asons · Accepted Answer · 2016-06-06T17:50:13.737

Here is 2 ways, using display: table

Side note: The display: table version work on IE 11, Edge, Chrome, Firefox, Safari. Because of a render issue in IE10 and below, you'll need a fixed height on the footer and header and use calc() to set the height on the inner cell/div to make it scroll.

html, body{
  height: 100%;
  margin: 0;
}
.tbl{
  display:table;
  table-layout: fixed;
  border-collapse: collapse;
}
.row{
  display:table-row;
}
.row.expanded{
  height: 100%;
}
.cell{
  display:table-cell;
}
.container,
.content{
  width: 100%;
  height: 100%;
}
.header {
  background: #0099cc none repeat scroll 0 0;
  height: 75px;
}
.footer {
  background: #3a3a3a;
  height: 75px;
}

#left_col {
  background: orange none repeat scroll 0 0;
  width: 50%;
  height: 100%;
}
  .scrollwrap {
    position: relative;
    height: 100%;
  }
    .scroll {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
    }
#right_col {
  background: green none repeat scroll 0 0;
  width: 50%;
}

<div class="tbl container">
  <div class="row">
    <div class="cell header">
    </div>
  </div>
  <div class="row expanded">
    <div class="cell">
      <div class="tbl content">
        <div class="row">
          <div id="left_col" class="cell">
            <div class="scrollwrap">
              <div class="scroll">
                long content <br>long content <br>long content <br>long content <br>
                long content <br>long content <br>long content <br>long content <br>
                long content <br>long content <br>long content <br>long content <br>
                long content last
              </div>
            </div>
          </div>
          <div id="right_col" class="cell"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell footer">
    </div>
  </div>
</div>

and the recommended, using flexbox, though with less browser support on older browsers

html, body{
  margin: 0;
}
.flex{
  display:flex;
}
.flex.column {
  flex-direction: column
}
.flexitem{
}
.container{
  height: 100vh;
}
.header {
  background: #0099cc none repeat scroll 0 0;
  height: 75px;
}
.content{
  flex: 1;
}
.footer {
  background: #3a3a3a;
  height: 75px;
}
#left_col {
  background: orange none repeat scroll 0 0;
  width: 50%;
  overflow: auto;
}
#right_col {
  background: green none repeat scroll 0 0;
  width: 50%;
}

<div class="flex column container">
  <div class="header">
  </div>
  <div class="flex content">
    <div id="left_col">
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content last
    </div>
    <div id="right_col"></div>
  </div>
  <div class="footer">
  </div>
</div>

When I use the Table code the content in the left col is hidden and it will not scroll. — Stefan, Jun 06 '16 at 06:51
@Stefan Updated with a version working on IE 11, Edge, Chrome, Firefox, Safari. Because of a [render issue in IE10](https://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100) and below, you'll need a fixed height on the footer and header and use calc() to set the height on the inner cell. — Asons, Jun 06 '16 at 17:47

Add footer to page with no scroll

2 Answers2