'Web Page content obscured by Android Soft-buttons. CSS solution?

Trying to view webpage content on my Android phone. The phone has soft-buttons and so the page content near the bottom of the page is partially obscured by the soft-buttons.

Is there a CSS approach to adjust for the possibility of soft-buttons within the mobile web browser? Or does one set some giant margin-bottom value to the content and hope for the best?

Pic: https://i.imgur.com/9qH4s2W.png

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <style>

      body 
      { 
         margin: 0; 
         padding: 0; 
         overflow: hidden;
         display:flex;
         justify-content: flex-end;
         flex-direction: column;         
         width:100vw;
         height:100vh;
      }

   </style>
</head>
<body>
   <div class="content">
      <img src="https://picsum.photos/100/100">
   </div>
</body>
androidhtmlcssweb


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions