Question

我正在尝试将我的面板移动到屏幕底部，当我在手机上查看它但我的代码没有做到这一点。我怎么能实现这个请求呢？

.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>

Answer 1

您可以这样做：

＆＃13;

.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: ?;*/
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 3

您只需添加bottom:0并向左：0或向右：0，以便您的面板始终显示在底部。如果您希望左侧的面板在右侧，请使用左侧。

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

HTML屏幕尺寸缩小时如何将div移动到屏幕底部 - HTML＆amp; CSS

3 个答案: