Skip to content Skip to sidebar Skip to footer
Home / Css / Html

100% Height Image With Fixed Topbar And A Footer (not Fixed)

Post a Comment
I have a topbar that it's fixed and a footer that appears when you scrolldown. I want to put to images with 100% but the problem is that the footer is overlaying them when you scro

Solution 1:

flexbox can help you acheive a sticky footer:

HTML:

<body class="flexbox-wrapper">
  <main class="page-wrapper">
    <header>HEADER</header>
    <div class="content">CONTENT</div>
  </main>
  <footer>FOOTER</footer>
</body>

CSS:

/* CSS reset*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* styling*/
header, footer, .content {
  padding: 25px;
}
header {
  background: #eee;
}
footer {
  background: #ddd;
}

/* needed code for sticky footer */
html, body {
  height: 100%;
}

.flexbox-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.page-wrapper {
  flex: 1 0 auto;
}

http://codepen.io/dreiv/pen/bgaBam

with this the footer will be on the bottom of the page by default or at the bottom of your content, if the content is bigger than the viewport.


Solution 2:

you can use position: relative; z-index: 1 for footer

since your right and left block is fixed, it will be at the top so you need to make footer above it. increase the value of z-index for footer if it's lower than side blocks.

for #leftImage and #rightImage remove height and use value of bottom

for example, here is the code for one block

#leftImage {
  top: 0;
  left: 0;
  width: 150px;
  bottom: 20px; /* same as the height of footer */
  position: fixed;
}

footer {
  height: 20px;
}

Post a Comment for "100% Height Image With Fixed Topbar And A Footer (not Fixed)"