100% height image with fixed topbar and a footer (not fixed)
Question
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 scroll down, how can I avoid that?
this is my code:
<body ng-cloak>
<topbar></topbar>
<img src="img/leftImage.jpg" id="leftImage" />
<div id="homescreen" class="container">
<div ui-view></div>
</div>
<img src="img/rightImage.jpg" id="rightImage" />
<footer></footer>
</body>
body {
background: url(/img/background.jpg) repeat fixed;
background-position-y: -50px;
background-position-x: -50px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#homescreen {
margin-top: 150px;
}
#leftImage{
top: 0;
left: 0;
width: 150px;
height: 100%;
position: fixed;
}
#rightImage{
top: 0;
right: 0;
width: 150px;
height: 100%;
position: fixed;
}
I know that if I put bottom: 0 the height property will do it anyway. If I wasn't clear please ask me. Thank you!
2 answers
solution1
0 2017-04-16 20:59:06
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.
solution2
0 2017-04-16 20:59:07
you can use position: relative; z-index: 1 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.