CODEWITHSUNDEEP
htmlcss
Arete
Arete

Reputation: 1004

Sidebar and sticky footer

Seems I am a bit rusty on CSS today. Searched on stackoverflow, but most similar questions does not have any good answers.

In the code provided I want to add a sidebar inside the #content div. I also want the footer to stick to the bottom even if there is no text in the content. Note that I do not want a position:fixed; footer. Just a footer that keeps at the bottom if there is no text on the page.

I tried making a sidebar by using the float property, but this cause the footer to not stick to the bottom.

How can I "divide" the content into two divs and make one of them a sidebar to the left.

Jsfiddle demo

This is what I am trying to achieve: enter image description here

Upvotes: 1

Views: 1212

Answers (1)

Zay Lau
Zay Lau

Reputation: 1864

I would wrap the HTML structure as follow:

<header>
  <h1>Header</h1>
</header>

<main>
  <nav>
    <p>Sidebar</p>
  </nav>

  <content>
    <p>Content</p>
  </content>

  <footer>
    <p>Footer</p>
  </footer>
</main>

And the CSS:

html,
body {
    margin:0;
    padding:0;
    height:100vh;
}

header {
    background: LightSlateGray;
  max-height: 10vh;
    padding:10px;
}
  header h1 {
    margin:0;
    padding:10px 0 0 10px;
  }

main { height: 90vh; max-height: 90vh; }

nav, content, footer { display: inline-block; float: left; }
content, footer { width: 80%; }

nav { width: 20%; height: 100%; background-color: #ff9090; }

content { height: calc(100% - 200px); max-height: calc(100% - 200px); overflow: auto; }

footer {
    height:200px;           /* Height of the footer */
    background:#6cf;
}
  footer p {
    margin:0;
    padding:10px;
  }

Demo link https://jsfiddle.net/fzj5gLe6/2/

Demo link that the content's text doesn't fill page: https://jsfiddle.net/fzj5gLe6/3/

Edit 1 -

Revised CSS, some max-height are changed to min-height, in order to let the footer stick at the bottom, added height: auto; to make the min-height of content work, demo link: https://jsfiddle.net/fzj5gLe6/5/

html,
body {
    margin:0;
    padding:0;
    height:100vh;
}

header {
    background: LightSlateGray;
  min-height: 10vh;
    padding:10px;
}
  header h1 {
    margin:0;
    padding:10px 0 0 10px;
  }

main { height: 0; min-height: 90vh; }

nav, content, footer { display: inline-block; float: left; }
content, footer { width: 80%; }

nav { min-height: 100%; width: 20%; }

content { height: auto; min-height: calc(100% - 200px); }

footer {
    height:200px;           /* Height of the footer */
    background:#6cf;
  float: right;
}
  footer p {
    margin:0;
    padding:10px;
  }

Edit 2 -

To allow the nav element to fill the height, I have appended position: relative; to the main element, and also added clearfix fix to it to let the main to get the correct height of it inside elements. (also height: auto;)

main { position: relative; height: auto; }
  main:before, main:after { display: table; content: ''; }
  main:after { clear: both; }

After that I revised styles of the nav element as follow to make it fill the parent's height

nav {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 20%;
  background:lightgreen;
  float: left;
}

Lastly, I make the content and footer elements to float: right; to complete the layout.

content, footer { float: right; }

Finished demo: https://jsfiddle.net/89ucrec5/3/

Upvotes: 1

Related Questions