Блог

Я хотел бы переместить 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 -->
  

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

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

Например

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