Question

我想将div移至移动屏幕的底部，我的网站在侧边栏中使用块，当有人使用小型设备时，我要将其移至底部

我已经成功地在移动设备上隐藏了侧边栏块，但由于令人沮丧而移动了它们

由于块由4个div组成，因此某些内容仍在手机上显示，因此我将所有代码都放在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 -->

Answer 1

您可以使用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
  }
}

在移动屏幕上将div移至底部

1 个答案: