具体定位方式在Bootstrap

Question

假设我有两个 div，class 为 "row"，并且我希望第二个始终位于 div 的最底部class 为 "section"（底部：0）。

下面是更好地说明它的代码：

<div class="section">
  <div class="row"></div>
  <div class="row"></div>
</div>

class 为 "section" 的 div 身高为 100vh 第一行大约占屏幕高度的 70%，我希望第二行始终位于页面底部，但在屏幕高度变小时也不会干扰第一行的内容。我怎样才能尝试定位那些 divs ？

Answer 1

给你。如果第二行大于视口的高度，则将内容添加到第一行会将第二行向下推。在非常小的屏幕上，您将像往常一样获得垂直主体滚动条。

http://codepen.io/dherran/pen/KzYqmW

body, html {
  min-height: 100%;
}

.section {
  height: 100vh;
}

.row:first-child {
  background: black;
  color: white;
  min-height: calc(100% - 40px);
}

.row:nth-child(2) {
  background: blue;
  height: 40px;
}

<div class="section">
  <div class="row"></div>
  <div class="row"></div>
</div>

我会避免为此使用 nth() 选择器。请改用类。这些选择器的使用仅用于说明目的。

具体定位方式在Bootstrap

Specific way of positioning in Bootstrap

css

positioning

rows