CODEWITHSUNDEEP
cssmobileviewport
g.kertesz
g.kertesz

Reputation: 454

Bottom-fixed element disappearing on mobile

Please take look at the following page on mobile:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="wide">WIDE</div>
  <div id="fixed">FIXED</div>
</body>
</html>

CSS:

#wide {
  background-color: blue;
  width: 120px;
}

#fixed {
  background-color: green;
  position:fixed;
  left: 0px;
  bottom: 0px;
}

The fixed element is there at the bottom right as expected. However, when you increase the width of the wide div past your device viewport width (in css pixels), the fixed div disappears.

Why does this happen? Is there a way to prevent this behaviour?

Further details:

Upvotes: 2

Views: 2609

Answers (2)

g.kertesz
g.kertesz

Reputation: 454

Answering my own question here.

I am not sure why the fixed div is not rendered. It is somehow related to the fact that the 'wide' div overflows the body element, causing the view to be zoomed out and the body ending up less tall than the viewport. I still believe that the mobile browser should show the fixed element just like the desktop browser does.

My fix: wrap the wide content in a container element with overflow-x: scroll. This works well on mobile, the fixed div is shown again and the wide content can be swiped across. 

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="ctnr">
    <div id="wide">WIDE</div>
  </div>
  <div id="fixed">FIXED</div>
</body>
</html>

CSS:

#ctnr {
  overflow-x: scroll;
}

#wide {
  background-color: blue;
  width: 120px;
}

#fixed {
  background-color: green;
  position:fixed;
  left: 0px;
  bottom: 0px;
}

Upvotes: 2

Michael
Michael

Reputation: 140

Not sure if this will help you but I added display: table-cell; to #wide. This way your div won't exceed the maximum width.

Upvotes: 0

Related Questions