CODEWITHSUNDEEP
htmlcsssticky-footer
Jumpman
Jumpman

Reputation: 439

Keeping footer on to the bottom with 2 divs on sides and main content

I am sorry for not beeing able to produce much code, otherwise my assignment could be detected as plagiarism. Following this tutorial I was able to create a sticky footer when having no sidebars. Trying to do the same with 2 divs -> "left-sidebar" and "right-sidebar" I got this: enter image description here

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
header {
  padding: 10px;
}
footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 40px;
  width: 100%;
  text-align: center;
  color: #fff;
  background: #333;
}
#main-content {
  position: absolute;
  width: 60%;
  margin-left: 15%;
  padding-bottom: 40px;
  /* Height of the footer */
}
#left-sidebar {
  width: 15%;
  position: absolute;
  left: 0;
  word-wrap: break-word;
  padding-bottom: 40px;
}
#right-sidebar {
  right: 0;
  position: absolute;
  width: 15%;
  word-wrap: break-word;
  padding-bottom: 40px;
}
<body>
  <div id="wrapper">
    
    <header>
    </header>
    
    <div id="left-sidebar">
    </div>
    
    <div id="main-content">
    </div>
    
    <div id="right-sidebar">
    </div>
    
    <footer>
    </footer>
    
  </div>
</body>

My technique is based on declaring the wrapper's position as relative, and the inside elements' as absolute. I know there is another technique when declaring the footers position relative as well, and then writing it outside of wrapper. If one could provide both solutions, I would be really happy! Thanks!

@I am exploring possibilities, so I'm trying to solve this without the "push" div

@What I actually want to achieve is this mockup MOCKUP

And I don't wanna used fixed position for footer, because its gonna stick to the bottom of my window and not of the "page"

I just dont understand these dumb haters downvoting for nothing, at least you could comment and give a critic!

Upvotes: 0

Views: 1366

Answers (3)

Shiloh Forest
Shiloh Forest

Reputation: 1

There is a simple solution. You want the header to stay at the top of you page, the footer at the bottom, and the sidebars/content will scroll

Add this to your CSS header:

position: fixed;
width: 100%;
z-index: 999;

Just change your CSS footer from 'absolute' positioning, to 'fixed' like so:

position: fixed;

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

http://plnkr.co/edit/roZhOyMUxkFmpsYr9tKW?p=preview

html,
body {
  box-sizing: border-box;
  font: 400 16px/1.5'Palatino Linotype';
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background-color: #222;
  color: #EFE;
  font-variant: small-caps;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shell {
  position: relative;
  padding: 1.5em .75em;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}
.content {
  position: absolute;
  left: 17vw;
  top: 10vh;
  outline: 3px dashed yellow;
  width: 66vw;
  height: 100vh;
  overflow-y: auto;
  padding: 15px;
}
header,
footer {
  width: 100%;
  height: 10vh;
  position: fixed;
  left: 0;
  outline: 2px solid cyan;
  padding: 12px;
  z-index: 100;
  background-color: hsla(160, 0%, 181%, .4);
}
footer {
  margin-top: 1.5em;
  bottom: 0;
}
header {
  margin-bottom: 1.5em;
  top: 0;
}
article {
  outline: 3px dashed white;
  height: 100%;
}
section {
  width: 100%;
  outline: 1px solid lime;
  height: 20vh;
}
.left,
.right {
  outline: 2px solid red;
  position: absolute;
  top: 10vh;
  width: 23vh;
  height: 80vh;
  padding: 5px;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
<!doctype html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
</head>

<body>

  <div class="shell">
    <header>
      <h1>H1 - Header</h1>
    </header>

    <nav class="left">
      <h4>H4 - Nav</h4>
    </nav>

    <main class="content">
      <h1>H1 - Main</h1>
      <article class="blog">
        <h2>H2 - Article</h2>
        <section id="intro">
          <h3>H3 - Section - Introduction</h3>
        </section>
        <section id="part1">
          <h3>H3 - Section - Part 1</h3>
        </section>
        <section id="part2">
          <h3>H3 - Section - Part 2</h3>
        </section>
        <section id="part3">
          <h3>H3 - Section - Part 3</h3>
        </section>
      </article>

    </main>

    <aside class="right">
      <h4>H4 - Aside</h4>
    </aside>

    <footer>
      <h3>H3 - Footer</h3>
    </footer>

  </div>
</body>

</html>

Upvotes: 0

Anonymous
Anonymous

Reputation: 10216

You could achieve that like this:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 40px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    background: #333;
}
header {
    padding: 10px;
    background: #333;
}
#wrapper {
    min-height: 100%;
    position: relative;
    font-size: 0px;
}
#main-content {
    width: 60%;
    margin-right: 10%;
    padding-bottom: 40px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
#left-sidebar {
    width: 15%;
    padding-bottom: 40px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
#right-sidebar {
    width: 15%;
    padding-bottom: 40px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
<header></header>
<div id="wrapper">
    <div id="left-sidebar"></div>
    <div id="main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div id="right-sidebar"></div>
</div>
<footer></footer>

Upvotes: 2

Related Questions