Question

我想将#second_row div放在页面底部。我尝试了不同的解决方案，但没有一个能有效。

#second_row {
  position: fixed;
  margin: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <table class="table">
        <thead>
          <tr>
            <th style="background-color: transparent">TH1</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="col-md-6">
      <table class="table">
        <thead>
          <tr>
            <th style="background-color: transparent">TH1</th>
            <th style="background-color: transparent">TH2</th>
            <th style="background-color: transparent">TH3</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
  <div class="row" id="second_row">
    <div class="col-md-4">
      Left
    </div>
    <div class="col-md-4">
      Middle
    </div>
    <div class="col-md-4">
      Right
    </div>
  </div>
</div>

Answer 1

您可以尝试这样的灵活解决方案：

＆＃13;

body {
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container #second_row {
  margin-top: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <table class="table">
        <thead>
          <tr>
            <th style="background-color: transparent">TH1</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="col-md-6">
      <table class="table">
        <thead>
          <tr>
            <th style="background-color: transparent" TH1</th>
              <th style="background-color: transparent">TH2</th>
              <th style="background-color: transparent">TH3</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>

  <div class="row" id="second_row">
    <div class="col-md-4">
      Left
    </div>
    <div class="col-md-4">
      Middle
    </div>
    <div class="col-md-4">
      Right
    </div>
  </div>
</div>

＆＃13;

Answer 2

要使固定位置显示在底部，您必须提及位置，例如顶部，右侧，左侧，底部。，并且不需要具有固定定位的边距元件

所以你的代码将像这样工作::

while(tolower(answer)!='y'||tolower(answer)!='n');

如何在页面底部放置元素

2 个答案: