Nor1Gamez Nor1Gamez - 1 year ago 72
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.


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


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.

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download