CODEWITHSUNDEEP
htmlcssmobile-safari
Giovanni S
Giovanni S

Reputation: 2110

Absolute Positioning without overflowing into another div

I am trying to create a full screen slider with a footer on the bottom. Making the slider full screen is easy, but adding a "footer" to it doesn't seem to be (for me). For instance the slider will have a photo and the div below it will have details about the photo, which all should be shown as the "landing page" without scrolling at all, on all devices.

My brain is telling me to create a wrapper container that is 100vh to fill 100% of the views height, and then create the footer - for this example - at a set height of 150px and then have the slider fill the remaining difference left over in the wrapper container, which in theory seems to be right, but I just can't seem to figure out how to actually do it without using scripting. I'm ok with scripts, just wondering if there is a pure css way of doing what I am trying to accomplish.

In this specific example I've tried absolute positioning on the footer div with bottom 0 to hug to the bottom of the main wrapper, which works, sort of (wonky on mobile especially iPhone due to the bottom navigational bar), but naturally due to the way position absolute seems to work, setting 100% height on the slider div will ignore the footer div and set its height to 100% of the wrapper container.

Is it possible to set bottom: 0, yet have the slider div to not overlap the absolute positioned footer div?

Is there a better way to do this all together using pure css? Have I lost my mind?

Here is a diagram of what I am trying to accomplish

This is what I am trying to accomplish

Original Code before suggestions

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>test page</title>
  <meta name="description" content="test page">
  <meta name="author" content="Test">

  <style>
  body {
    margin: 0px;
  }
  .page-wrapper {
    height: 100vh;
    background-color: red;
  }
  .slider {
    height: 100%;
    background-color: blue;
  }

  .slider-footer {
      height: 150px;
      background-color: green;
      position: absolute;
      bottom: 0;
      width: 100%;
  }
  </style>

</head>

<body>
  <div class="page-wrapper">
      <div class="slider">
      </div>
      <div class="slider-footer">
      </div>
  </div>
</body>
</html>

UPDATE / EDIT

Additionally, as suggested below, calc(100vh -150px) on the .slider works better. It works perfectly well on the desktop, but when pulled up on my iPhone, not so much.

Updated Style Code

 <style>
  body {
    margin: 0px;
  }
  .page-wrapper {
    height: 100vh;
    max-height: 100vh;

    background-color: red;
  }
  .slider {
    background-color: blue;
    height: calc(100vh - 150px);
    max-height: calc(100vh - 150px);
  }

  .slider-footer {
      height: 150px;
      background-color: green;
      position: absolute;
      bottom: 0;
      width: 100%;
  }
  </style>

The iPhone seems to be automatically adjusting the view because of the lower navigation buttons of safari on the device. It looks like it stretches the .page-wrapper down further than it should. I tried to prevent this by adding a max-height: 100vh to the .page-wrapper, but that didn't seem to do anything at all

Here is what the page looks like on the iPhone

iPhone landing page

Things look perfectly fine, just the way they should...

Until you scroll down

Things get Wonky

Thats when things get a little weird...

It seems like, on safari on iPhone at least, 100vh is taking into account the bottom navigation bar, yet the absolute positioning of the slider.footer is ignoring it and setting it self to the top of safari's bottom navigation bar. I get why apple would do that, because the navigation bar is always there by default until you scroll down, but it is clearly causing an issue with what I am trying to accomplish...

Am I correct to think this is an iPhone / Safari problem, or are my html/css skills just that far off?

Upvotes: 0

Views: 92

Answers (3)

Jesus Lugo
Jesus Lugo

Reputation: 796

Another approach would be:

.page-wrapper { position: relative }
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 150px;
}

Hope this (finally) helps :)

Upvotes: 0

Jesus Lugo
Jesus Lugo

Reputation: 796

I'd do something like:

.slider {
    height: calc(100vh - 150px);
}

Hope this helps :)

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

You could try this:

body {
    margin: 0px;
    margin-bottom: 150px;
}

Upvotes: 0

Related Questions