CODEWITHSUNDEEP
htmlcss
Stefan
Stefan

Reputation: 33

Add footer to page with no scroll

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>

Upvotes: 2

Views: 1864

Answers (2)

Asons
Asons

Reputation: 87191

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>

Upvotes: 0

Chanaka Lakmal
Chanaka Lakmal

Reputation: 1122

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>

Upvotes: 2

Related Questions