需要行以填充剩余空间 [英] Need row to fill remaining space

问题描述

查看图片以了解当前情况.我希望黄色部分( .content )向下推动底部黑色部分( .footer )并展开以占据所有剩余的屏幕空间(水平和垂直).但是正如您所看到的，两者都没有.该图像后底部的代码:

See image to see how it is now. I want the yellow part (.content) to push the bottom black part (.footer) down and expand to take up all remaining screen space (horizontal and vertical). But as you can see, it does neither. Code at the bottom, after this image:

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

感谢您可以分享的任何想法！斯科特

Thank you for any ideas you can share! Scott

推荐答案

主要问题是您的 .content 元素没有结尾的 div .

The principal problem is that your .content element doesn't have a closing div.

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

另一个问题是 width:100vh 不能提供您期望的完整宽度.

Another problem is that width: 100vh doesn't give you the full width you expect.

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

您使用的是视口高度单位的宽度.我想您想要 vw .

You're using viewport height units for width. I think you wanted vw.

但是最后，您不需要任何内容​​，因为块元素默认情况下为全宽度.

But in the end, you don't need any of it, as block elements take full width by default.

此外，如果您要全角，则不需要 end 值.

Also, if you want full width, you don't need end values.

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

这篇关于需要行以填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！