Home/ Questions/Q 6476731
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:51:40+00:00

I have a site which should be suitable for mobile visitors, and therefore should

  • 0

I have a site which should be suitable for mobile visitors, and therefore should scale to the dimensions of the user’s screen, both in width and height. Furthermore, I have 2 navigation menus (1 left, 1 right), and some fixed info on the bottom (like a footer). All these parts contain images that should be scaled to fit into the menu’s dimensions. Concretely, the page is something like (adding a random image that is too big by default):

<body>
  <table class="wholepage">

    <tr class="top">

      <td class="left">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
        </table>
      </td>

      <td class="middle">Middle content</td>

      <td class="right">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
        </table>
      </td>

    </tr>
    <tr class="bottom">

      <table>
        <tr>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
        </tr>
      </table>

    </tr>
  </table>
</body>

With the following CSS:

.wholepage {
  width: 100%;
  height: 100%;
}

.wholepage img {
  width: 100%;
  height: 100%;
}

.top {
  height: 80%;
}

.left, .right {
  width: 15%;
}

.middle {
  width: 70%;
}

.bottom {
  height: 20%;
}

Like that, the width of the page adapts itself perfectly, sticking to the 15%-70%-15% distribution between left-middle-right. However, vertically, all the images refuse to scale. How can I get the page to fit to the 80%-20% distribution for top-bottom?

EDIT: Here’s a way to see it, if you fill this in in http://www.w3schools.com/css/tryit.asp?filename=trycss_default

<html>
<head>
<style type="text/css">

html, body {
  height: 100%;
}

.wholepage {
  width: 100%;
  height: 100%;
}

.wholepage img {
  width: 100%;
}

.top {
  height: 80%;
}

.left, .right {
  width: 15%;
}

.left {
  position: fixed;
  top: 0px;
  left: 0px;
}

.right {
  position: fixed;
  top: 0px;
  right: 0px;
}

.middle {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.bottom {
  height: 20%;
  position: fixed;
  bottom: 0px;
}


</style>
</head>

<body>
  <div class="wholepage">

    <div class="top">

      <div class="left">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
        </table>
      </div>

      <div class="middle">Middle content</div>

      <div class="right">
        <table>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
          <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
        </table>
      </div>

    </div>
    <div class="bottom">

      <table>
        <tr>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
          <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
        </tr>
      </table>

    </div>
  </div>
</body>

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I ended up hacking it. Unless someone knows a better way, here’s what I did:

    function fixHorizontalDimension(){
  maxHeight = window.innerHeight * [% height desired] * 0.9;
  imgs = document.getElementsByClassName([classname of wrongly sized objects]);
  for(i=0; i<imgs.length; i++){
    imgs[i].style.height = maxHeight;
  }
}

    Since the site is only to be used personally, and using a mobile browser, this fix does the job. Resizing (e.g. switching from portrait to landscape) doesn’t work though.

    • 0