css - 强制 Bootstrap 行占据页面的整个高度

Question

我有一个正在处理的 django 元素，我正在将 bootstrap 集成到我的 html 文件中。在我的 html 模板中，我有一行的大小与行内的内容一样大。我想让它占据页面的整个高度并完全填满页面。我尝试了标准的 css，但它根本不起作用。有没有办法强制它。我的另一个问题是，是否有办法固定行的位置，以便在我上下滚动时它不会移动。

我想固定第一行

第二行的两侧边栏占据了屏幕的其余部分。

这是 html 模板:

{% extends "base.html" %}
{% load staticfiles %}

{% block standard %}
<div class="row">
  <div class=" border-padding solid-borders">
    <a href="{% url 'user_groups' %}">
      <img src="{% static 'images/Yap-Logo-6.png'%}" class="header-icon-size" alt="">
    </a>
  </div>
    ...
  <div class="col-3">
  </div>
  <div class="border-padding solid-borders">
    <a href="">
      <img src="{% static 'images/user.png'%}" class="header-icon-size" alt="">
    </a>
  </div>
</div>
<div class="row">
  <div class="col-4 content-backgroun">
  </div>
  <div class="col">
    {% block content %}
    {% endblock %}
  </div>
  <div class="col-4 content-backgroun">
  </div>
</div>
{% endblock %}

Answer 1

向元素添加 height: 100vh 将使其高度为视口(viewport)高度的 100%。

要将元素固定到页面，使用 position: fixed 将其“粘贴”到页面，使用 top, left、right 和 bottom 属性，用于将元素定位到您想要的位置。

其余 CSS 的编写方式有很多细微差别，但一般来说，position: fixed 会将元素粘贴到页面并使用 vh 单位将允许您根据用户视口(viewport)的高度调整元素的高度。

下面的快速示例:

.row-fixed {
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  background-color: salmon;
}
.row-tall {
  height: 100vh;
  background: linear-gradient(to top right, lightgreen, lightyellow);
}
.row {
  padding: 2em 5%;
}
body {
  margin: 6em 0 0 0;
  padding: 0;
  font-family: sans-serif;
}

<div class="row row-tall">
  <h1>This row is 100% of the viewport's height.</h1>  
</div>

<div class="row row-tall">
  <h2>This row is <i>also</i> 100% of the viewport's height and is only here to fill vertical space.</h2>  
</div>

<div class="row row-fixed">
  <p>This is fixed to the top</p>
</div>