如何将元素定位在底部而不与其他内容混合

Question

如何将元素定位在底部而不与其他内容混合

htmlcss

3

我有一个带有表格的弹出窗口，我正在通过JavaScript添加行。在弹出窗口底部有两个按钮，我希望：

这两个按钮保持在弹出窗口底部。
如果我通过JavaScript添加了更多行到表格中，我希望这些行不会和按钮混在一起。

当我添加行时，它看起来像这样：

但我希望它看起来像这样：

下面是HTML代码：

<body>
    <div id="popup_header">
        <div id="popup_logo_div"></div>
        <button id="cog-button" type="button">
            <a id="index_link"> <i class="fa fa-cog  fa-lg fa-fw" style="font-size:27px;"></i></a>
        </button>
    </div>

    <div>
        <table style="width:100%" id="scan-history-table" border=1 frame=void rules=rows>
        </table>
    </div>

    <div class="bottom_banner">
        <hr>
        <table width="100%" id="table-footer">
            <tr>
                <td class="tds"><a id="collect_logs" class="locale_message">Collect Logs</a></td>
                <td class="tds"><a id="clear_compleated_btn" class="locale_message K12">Clear</a></td>
            </tr>
        </table>
    </div>

    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</body>

CSS：

body {
    margin: 0;
    padding: 0;
    width: 417px;
    font-size: 16px;
    height: 505px;
}

#popup_header {
    height: 70px;
    background-color: #0a3d63;
    color: white;
    border-bottom: 5px solid #2672fb;
}

td:not(.tds),
th {
    padding: 15px 15px;
}

#cog-button {
    float: right;
    background: none;
    color: white;
    border: none;
    cursor: pointer;
    float: right;
    margin: 12px;
    margin-top: 20px;
}

#popup_logo_div {
    width: 210px;
    float: left;
    /*    margin: 20px 0px 0px 10px;*/
    margin: 15px 0px 0px 5px;
}

img {
    height: 35px;
}

hr {
    /*    background-size: 5px 1px;*/
    opacity: 0.4;
}

a {
    /*    font-size: 16px;*/
    cursor: pointer;
}

a:hover {
    color: #a0ce38;
}

.bottom_banner {
    position: absolute;
    /*    position: fixed;*/
    bottom: 0px;
    width: 100%;
/*    background-color: red;*/
    /*    margin-top: 70px;*/
    /*     font-size: 12px;*/
}

.locale_message {
    /*    text-align: center;*/

}

.locale_message {
    /*    text-align: center;*/

}

.tds {
    text-align: center;
    height: 20px;
}

/*
.right-border {
    border-right: 1px solid black;
    height: 40px;
    padding: -10px;
    margin-top: 20px;
}
*/

td {
    width: 50%;
}

i {
    margin-top: 7px;
}

ul {
    list-style-type: none;
    padding: 10;
}

#table-footer {
    margin-bottom: 5px;
}

Fiddle

- Codey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sugars · Accepted Answer

$(function() {
  var trLen = $('#scan-history-table').find('tr').length;
  if (trLen === 0) {
    $('.bottom_banner').css('position', 'fixed');
  }
})

body {
  margin: 0;
  padding: 0;
  width: 417px;
  font-size: 16px;
  height: 505px;
}

#popup_header {
  height: 70px;
  background-color: #0a3d63;
  color: white;
  border-bottom: 5px solid #2672fb;
}

td:not(.tds),
th {
  padding: 15px 15px;
}

#cog-button {
  float: right;
  background: none;
  color: white;
  border: none;
  cursor: pointer;
  float: right;
  margin: 12px;
  margin-top: 20px;
}

#popup_logo_div {
  width: 210px;
  float: left;
  /*    margin: 20px 0px 0px 10px;*/
  margin: 15px 0px 0px 5px;
}

img {
  height: 35px;
}

hr {
  /*    background-size: 5px 1px;*/
  opacity: 0.4;
}

a {
  /*    font-size: 16px;*/
  cursor: pointer;
}

a:hover {
  color: #a0ce38;
}

.bottom_banner {
  position: absolute;
  /*    position: fixed;*/
  bottom: 0px;
  width: 100%;
  /*    background-color: red;*/
  /*    margin-top: 70px;*/
  /*     font-size: 12px;*/
}

.locale_message {
  /*    text-align: center;*/
}

.locale_message {
  /*    text-align: center;*/
}

.tds {
  text-align: center;
  height: 20px;
}


/*
.right-border {
    border-right: 1px solid black;
    height: 40px;
    padding: -10px;
    margin-top: 20px;
}
*/

td {
  width: 50%;
}

i {
  margin-top: 7px;
}

ul {
  list-style-type: none;
  padding: 10;
}

#table-footer {
  margin-bottom: 5px;
}

#collect_logs:hover {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="position: relative;padding-bottom: 50px;">
  <table style="width:100%;" id="scan-history-table" border="1" frame="void" rules="rows">
    <tbody>
      <tr>
        <td>content</td>
      </tr>
      <tr>
        <td>content</td>
      </tr>
      <tr>
        <td>content</td>
      </tr>
      <tr>
        <td>content</td>
      </tr>
      <tr>
        <td>content</td>
      </tr>
      <tr>
        <td>content</td>
      </tr>
      <tr>
        <td>content</td>
      </tr>
      <tr>
        <td>content</td>
      </tr>
    </tbody>
  </table>

  <div class="bottom_banner">
    <hr>
    <table width="100%" id="table-footer">
      <tbody>
        <tr>
          <td class="tds"><a id="collect_logs" class="locale_message">Collect Logs</a></td>
          <td class="tds"><a id="clear_compleated_btn" class="locale_message K12">Clear</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

将 bottom_banner 移动到表格的父容器中，然后为父容器添加以下样式：position:relative;padding-bottom:50px;。因为您的底部位置是绝对定位。