需要行以填充剩余空间

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>