Нужна строка, чтобы заполнить оставшееся пространство

Question

Смотрите изображение, чтобы увидеть, как оно сейчас. Я хочу, чтобы желтая часть (.content) надавила на нижнюю черную часть (.footer) и развернулась, чтобы занять все оставшееся пространство экрана (горизонтальное и вертикальное). Но, как вы можете видеть, это не так. Код внизу, после этого изображения:

.container {
	height: 100vh;
	width: 100vh;
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: 2fr 9fr 1fr;
    grid-template-areas: 
    "h h h"
    "c c c"
    "f f f";
	}

.header {
	background-color: #000000;
	grid-area: h;
	justify-items: center;	
	}

.content {
	background-color: #ffff00;
	grid-area: c;
	}

.footer {
	background-color: #000000;
	grid-area: f;
	justify-self: end;
	align-self: end;
	}

<div class="container">
	<div class="header">
		<div><a href="index.asp">
		<img src="images/title-img-640.png" class="logo" alt="Play to Evolve" title="Play to Evolve">
		</a></div>
	</div>

	<div class="content">
		What is your reaction to receiving criticism?
	<div>
	
  <div class="footer">
	  <div class="textFooterSmall">
	  Copyright 2019 ClearSay.net<br>
	  </div>
  
		<div></div>

		<div class="textFooterSmall">
		design by <a class="footerlinkSmall" href="http://www.OceanMedia.net" target="_blank">OceanMedia.net</a><br>
		<a class="footerlinkSmall" href="admin_menu.asp">admin</a>
		</div>
	</div>
</div>

Спасибо за любые идеи, которыми вы можете поделиться! Скотт

Answer 1

Основная проблема в том, что у вашего .content элемента нет закрывающего div.

<div class="content">What is your reaction to receiving criticism?<div>

Другая проблема заключается в том, что width: 100vh не дает ожидаемой вами полной ширины.

.container {
   height: 100vh;
   width: 100vh;
   display: grid;
       ...
       ...
}

Вы используете высота области просмотра единицы для ширины. Я думаю, что вы хотели vw.

Но, в конце концов, вам это не нужно, поскольку блочные элементы по умолчанию занимают всю ширину.

Кроме того, если вам нужна полная ширина, вам не нужны значения end.

.footer {
    background-color: #000000;
    grid-area: f;
    justify-self: end;
    align-self: end;
 }

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: 2fr 9fr 1fr;
  grid-template-areas: "h h h" 
                       "c c c"
                       "f f f";
}

.header {
  grid-area: h;
  background-color: #000000;  
}

.content {
  grid-area: c;
  background-color: #ffff00;  
}

.footer {
  grid-area: f;
  background-color: #000000;  
}

body {
  margin: 0;
}

<div class="container">
  <div class="header">
    <div>
      <a href="index.asp">
        <img src="images/title-img-640.png" class="logo" alt="Play to Evolve" title="Play to Evolve">
      </a>
    </div>
  </div>
  <div class="content">
    What is your reaction to receiving criticism?
  </div>
  <div class="footer">
    <div class="textFooterSmall">
      Copyright 2019 ClearSay.net<br>
    </div>
    <div></div>
    <div class="textFooterSmall">
      design by <a class="footerlinkSmall" href="http://www.OceanMedia.net" target="_blank">OceanMedia.net</a><br>
      <a class="footerlinkSmall" href="admin_menu.asp">admin</a>
    </div>
  </div>
</div>