Перемещение div на низ на экранах мобильных устройств - PullRequest
Новая
       18

Перемещение div на низ на экранах мобильных устройств

0 голосов
/ 03 апреля 2019

Я хотел бы переместить div на нижнюю часть экрана мобильного устройства, мой веб-сайт использует блоки на боковой панели, и я хотел бы переместить их вниз, когда кто-то использует маленькое устройство

Я добился определенного успеха, скрывая блоки боковых панелей на мобильных устройствах, но перемещая их, как разочаровывающий

Некоторые вещи все еще показывались на мобильных телефонах, потому что блоки состоят из 4 делителей, поэтому я поместил весь код в div myblock-hide, это работает с сокрытием блоков 

   $blockId = 'b-' . sha1($caption);
   print("<div class='myBlock-hide'>
      <div class='myBlock'>
        <div class='myBlock-caption'>$caption<a style='float:right; clear:right;' href='#' class='showHide' id='$blockId'></a></div>
        <div class='myBlock-content'>
        <div class='slidingDiv$blockId'>");
            print("</div>");
}

Это скрывается на мобильных устройствах. Есть ли способ переместить его вниз? 

@media only screen and (max-width: 430px) {
  .myBlock-hide {
      display: none;
  }
}

Может быть, я мог бы подойти к этому по-другому и спрятать части стола 

  <!-- Start response -->
  <div id='main'>
    <table cellspacing="0" cellpadding="7" width="100%" border="0">
     <tr>
          <!-- START LEFT COLUM -->
          <td valign="top" width="170">
          <?php leftblocks();?>
          </td>
          <!-- END LEFT COLUM -->

          <!-- START MAIN COLUM -->
          <td valign="top">
          <?php function_exists('T_') or die;
            if ($site_config["MIDDLENAV"]){
                middleblocks();
            } // MIDDLENAV ON/OFF END
            ?>
          </td>
          <!-- END MAIN COLUM -->

          <!-- START RIGHT COLUMN -->
          <td valign="top" width="170">
          <?php rightblocks(); ?>
          </td>
          <!-- END RIGHT COLUMN -->
        </tr>
    </table>
  </div>
<!-- End response -->

1 Ответ

0 голосов
/ 03 апреля 2019

Вы можете использовать position: fixed и bottom: 0

, также вы можете удалить <div class="myBlock-hide"> ... </div>

Например 

@media only screen and (max-width: 767px) {
  .myBlock {
      position: fixed;
      bottom: 0;
      z-index: 40; // greater value keep it above all
      width: 100%; // or your desired width
  }
}
...