Nor1Gamez Nor1Gamez - 4 months ago 8
CSS Question

Center Image at the bottom of a div with a viewport height on it

I'm trying to get an image to sit at the bottom of a div. The div has a viewport height of 100 but also a minimum height of 680px. The image sits nicely at the bottom until I begin to scroll down the page and the viewport height is smaller than 680px.

HTML:

<header>
<div class="container">
<div class="arrow">
<img src="arrow.png">
</div>
</div>
</header>


CSS:

header {
background-color: #29a9e2;
height: 100vh;
min-height: 680px;
background-size: cover;}

.container {
width: 100%;
max-width: 1200px;
margin: 0px auto;}

.arrow {
/* this is just what i've been experimenting with*/
position: absolute;
left: 0;
bottom: 0;
padding-top: 600px;}


Here's a Fiddle that show kind of what my problem is. https://jsfiddle.net/u7b95fve/

(Make the viewport smaller than 680px and then scroll down).
Thanks for the help.

Answer

You need to add position:relative to the styles for <header>.

Then the position:absolute for .arrow will work properly.

Reason: If you want to position an element absolutely within another element, you must explicitly declare positioning for the parent element.

Comments