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会使其高度达到视口高度的100％。

要将元素修复为某个页面，请使用position: fixed来粘贴＆＃34;粘贴＆＃34;它会显示在页面上，使用top，left，right和bottom属性将元素放置在您希望的位置。

如何编写CSS的其余部分有很多细微差别，但一般来说，position: fixed会将元素粘贴到页面上，使用vh单位将允许您调整高度根据用户视口的高度来确定元素。

以下快速示例：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

强制引导行占据整个页面的高度

1 个答案: