当屏幕尺寸减小时如何将 div 移动到屏幕底部 - HTML & CSS答案

【问题标题】：How to move div to the bottom of the screen when screen size reduces - HTML & CSS当屏幕尺寸减小时如何将 div 移动到屏幕底部 - HTML & CSS
【发布时间】：2017-12-13 19:05:12
【问题描述】：

当我在手机上查看面板时，我正试图将面板移动到屏幕底部，但我的代码无法解决问题。我怎样才能做到这一点？

.panel {
  background: white;
  height: 50%;
  position: fixed;
  right: 15px;
  width: 25%;
  padding-left: 20px;
}

@media (min-width: 458px) {
  .my_panel {
    width: 100%;
  }
}

<div class="container col-md-4 col-md-offset-0 panel">
  <div style="overflow:scroll; height:70%" class="my_panel">
    <table class="table">
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>
    </table>
    <a href=""><button type="submit" class="btn" id="btnAdd" style=" position:fixed; bottom:290px; right:20px">Add</button></a>
  </div>
</div>

【问题讨论】：

标签： html css media-queries

【解决方案1】：

你可以这样做：

.panel {
  background: white;
  height: 50%;
  position: fixed;
  right: 15px;
  width: 25%;
  padding-left: 20px;
}

@media (min-width: 458px) {
  .my_panel {
    width: 100%;
  }
}

@media (max-width: 457px) { /* adjust to your needs */
  .my_panel {
    position: fixed;
    bottom: 0;
    /*width: ?;*/
  }
}

<div class="container col-md-4 col-md-offset-0 checkout_panel">
  <div style="overflow:scroll; height:70%" class="my_panel">
    <table class="table">
      <thead>
        <tr> 
          <th></th>
        </tr>
      </thead>
    </table>
    <a href=""><button type="submit" class="btn" id="btnAdd" style="position:fixed; bottom:290px; right:20px">Add</button></a> 
  </div>
</div>

【讨论】：

它不动。我正在 iphone 7 plus 上尝试这个，它仍然是它的位置
@XamarinDevil 好的，很高兴。

【解决方案2】：

对于固定对齐，您通常使用top: ?px、right: ?px、bottom: ?px 和/或left: ?px 与position: fixed 一起确定与窗口边框的距离。因此，如果您在 @media-Block 中使用 bottom: 0px，它会将您的栏完全移动到底部。

【讨论】：

【解决方案3】：

您只需要添加 bottom:0 和 left:0 或 right:0 以便您的面板始终显示在底部。如果您希望面板位于左侧，请使用 left，反之亦然。

.panel
{
 background-color:white ;  height:50%;  position:fixed;width:25%; padding-left:20px; bottom: 0; right:0;
}

【讨论】：