如何在页面底部放置元素

时间:2017-12-01 10:41:54

标签: css twitter-bootstrap

我想将#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>

2 个答案:

答案 0 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

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

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