HTMLで画面いっぱいに要素を表示したいのに小さく配置されてしまう。

前提・実現したいこと

railsでオリジナルアプリを作っています。index.html.erbのビューファイルを、HTMLの要素を画面いっぱいに表示したいのに、ものすごく小さく表示されてしまいます。
bootstrap4を適用済みです。

該当のソースコード

html
1<div class="container-fluid">
2  <div class="row">
3    <%= render partial: "sidebar" %>
4    <main class="ml-20em col-9 ms-auto">
5      <nav class="navbar navbar-expand-lg navbar-light bg-light my-2">
6        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
7          <span class="navbar-toggler-icon"></span>
8        </button>
9        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
10          <div class="navbar-nav ">
11            <%= link_to("新着記事", articles_path, class: "nav-item nav-link active") %>
12            <%= link_to("いいねの多い記事", articles_path(option: "likes"), class: "nav-item nav-link ")%>
13            <%= link_to("閲覧数の多い記事", articles_path(option: "views"), class: "nav-item nav-link ")%>
14            <%= link_to("タイムライン", articles_path(option: "timeline"), class: "nav-item nav-link ")%>
15          </div>
16        </div>
17      </nav>
18        <div class="container">
19          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 ml-20em mt-20em">
20            <%= render partial: 'article', collection: @articles%> <%#検索機能を@resultsにしないと検索はできない%>
21          </div>
22          <div class= "ml-4 pagination">
23            <%= paginate @articles %>
24          </div>
25        </div>
26      </div>
27    </main>
28  </div>
29</div>
30<% breadcrumb :root %>

CSS
1
2body {
3  font-size: .875rem;
4  height: 100%;
5}
6.container-fluid{
7  height: 100%;
8}
9
10.feather {
11  width: 16px;
12  height: 16px;
13  vertical-align: text-bottom;
14}
15
16/*
17 * Sidebar
18 */
19
20.sidebar {
21  position: fixed;
22  top: 0;
23  /* rtl:raw:
24  right: 0;
25  */
26  bottom: 0;
27  /* rtl:remove */
28  left: 0;
29  z-index: 100; /* Behind the navbar */
30  padding: 48px 0 0; /* Height of navbar */
31  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
32  height: 100%;
33}
34
35@media (max-width: 767.98px) {
36  .sidebar {
37    top: 5rem;
38  }
39}
40
41.sidebar-sticky {
42  position: relative;
43  top: 0;
44  height: calc(100vh - 48px);
45  padding-top: .5rem;
46  overflow-x: hidden;
47  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
48}
49
50.sidebar .nav-link {
51  font-weight: 500;
52  color: #333;
53}
54
55.sidebar .nav-link .feather {
56  margin-right: 4px;
57  color: #727272;
58}
59
60.sidebar .nav-link.active {
61  color: #007bff;
62}
63
64.sidebar .nav-link:hover .feather,
65.sidebar .nav-link.active .feather {
66  color: inherit;
67}
68
69.sidebar-heading {
70  font-size: .75rem;
71  text-transform: uppercase;
72}
73
74/*
75 * Navbar
76 */
77
78.navbar-brand {
79  padding-top: .75rem;
80  padding-bottom: .75rem;
81  font-size: 1rem;
82  background-color: rgba(0, 0, 0, .25);
83  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
84}
85
86.navbar .navbar-toggler {
87  top: .25rem;
88  right: 1rem;
89}
90
91.navbar .form-control {
92  padding: .75rem 1rem;
93  border-width: 0;
94  border-radius: 0;
95}
96
97.form-control-dark {
98  color: #fff;
99  background-color: rgba(255, 255, 255, .1);
100  border-color: rgba(255, 255, 255, .1);
101}
102
103.form-control-dark:focus {
104  border-color: transparent;
105  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
106}
107
108.pagination{
109  margin-left: 27em;
110}
111
112

試したこと

cssでbodyや.container-fluidをheight: 100％；にしてみましたが、できませんでした。初歩的な質問ですが、教えて欲しいです。

行動規範の内容に同意します

回答1件

ベストアンサー

htmlとbody（とそれに続く祖先要素）にheight: 100%のスタイルを当ててください。

<percentage> Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. **If the height of the containing block is not specified explicitly** (i.e., it depends on content height), and this element is not absolutely positioned, **the value computes to 'auto'**.

Visual formatting model details

（訳）もし包含ブロックの高さが明示されていない（たとえば、内容物に依存している）場合、（略）autoとして扱われます。

投稿2021/03/17 03:15