CODEWITHSUNDEEP
htmlcsslandscapesticky-footer
cliffgallagher
cliffgallagher

Reputation: 23

Sticky footer breaks in landscape orientation

My sticky footer is not working in landscape orientation. I'm trying to create two divs, each of an equal height, that together will take up all the available height between my header and footer when the mobile device (of width 749px or less) is in portrait orientation. However, when the device is in landscape orientation, I want the divs to maintain a minimum height of 172 pixels each.

In addition, within each div, I want nested a vertically and horizontally centered, smaller div.

Everything looks fine in portrait orientation. In landscape orientation, the footer rests at the bottom of the viewport, rather than at the bottom of the second div.

".index-content" is the div I am using/attempting to use to keep the footer at the bottom of the page. The header has a fixed height of 192px - the footer has a fixed height of 32px (2em).

I've noticed that, in landscape orientation, the html and body elements only stretch to the bottom of the viewport. I've set the height of each to 100%, however, so I don't understand why that's happening. Is this a problem with my meta tag?

I'm sure the solution is somewhat obvious but I've been unable to suss it out. Any help would be appreciated!

@media screen and (min-width: 0px) and (max-width: 749px) {
  /* -------Header and footer stuff start-----*/
  * {
    box-sizing: border-box;
    margin: 0;
  }
  html {
    height: 100%;
  }
  body {
    height: 100%;
  }
  .index-content {
    min-height: calc(100% - 2em);
    padding: 0;
    margin: 0;
    height: calc(100% - 2em);
  }
  .footer {
    height: 2em;
    background-color: black;
  }
  header {
    height: 192px;
    background-color: black;
  }
  /*------Header and footer stuff end--------*/
  /*-------Services stuff---------*/
  .wrapper-content {
    max-width: 80%;
    margin: 0 auto;
    padding: 0;
    height: calc(100% - 192px);
  }
  .services-one {
    height: 50%;
    background-color: blue;
    min-height: 172px;
    max-width: 256px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .services-one-sub-one {
    height: 95%;
    width: 95%;
    background-color: red;
  }
  .services-two {
    height: 50%;
    background-color: green;
    min-height: 172px;
    max-width: 256px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .services-two-sub-one {
    height: 95%;
    width: 95%;
    background-color: yellow;
  }
}
<div class="index-content">
  <header>
  </header>
  <div class="wrapper-content">
    <div class="services-one">
      <div class="services-one-sub-one">
      </div>
    </div>
    <div class="services-two">
      <div class="services-two-sub-one"></div>
    </div>
  </div>
</div>
<footer class="footer">
  <p>footer text</p>
</footer>

Upvotes: 0

Views: 1324

Answers (1)

Himanshu Gupta
Himanshu Gupta

Reputation: 561

Replace 100% height and 100vh and also some little tweeks as per below code:

If you want to show inside box with some particular height in landscape mode(where height is so much less), assign min-height to wrapper-content class. 

@media screen and (min-width: 0px) and (max-width: 749px) {
  /* -------Header and footer stuff start-----*/
  * {
    box-sizing: border-box;
    margin: 0;
  }
  .index-content {
    min-height: calc(100vh - 2em);
    padding: 0;
    margin: 0;
  }
  .footer {
    height: 2em;
    background-color: black;
  }
  header {
    height: 8em;
    background-color: black;
  }
  /*------Header and footer stuff end--------*/
  /*-------Services stuff---------*/
  .wrapper-content {
    max-width: 80%;
    margin: 0 auto;
    padding: 0;
    height: calc(100vh - 10em);
  }
  .services-one {
    height: 50%;
    background-color: blue;
    max-width: 256px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .services-one-sub-one {
    height: 95%;
    width: 95%;
    background-color: red;
  }
  .services-two {
    height: 50%;
    background-color: green;
    max-width: 256px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .services-two-sub-one {
    height: 95%;
    width: 95%;
    background-color: yellow;
  }
}
<div class="index-content">
  <header>
  </header>
  <div class="wrapper-content">
    <div class="services-one">
      <div class="services-one-sub-one">
      </div>
    </div>
    <div class="services-two">
      <div class="services-two-sub-one"></div>
    </div>
  </div>
</div>
<footer class="footer">
  <p>footer text</p>
</footer>

Upvotes: 1

Related Questions