html - 如何让页脚和页眉为 100% 浏览器宽度，但将介于两者之间的所有内容保持在 80%

Question

上图是我试图实现的。无论浏览器的大小如何，顶部标题都是浏览器宽度的 100%。页脚是相同的。我希望这两者之间的所有其他内容都为 80%，如图所示在黑盒子里。我认为这是一个相对简单的概念，但我的代码不起作用:

https://jsfiddle.net/2qwvbdy4/

@font-face{
	font-family: Bebas;
	src:url(BEBAS.TTF);
}
body{
	width:80%;
	margin:0 auto;
	height:500px;
	background:blue;

}
.header{
	top:0;
	position:absolute;
	left:0;
	right:0;
	background:#ff6200;
	height:50px;
	width:100%;
	color:white;
	font-family: Bebas;

}
.header .call{
	
		line-height:50px;
}
.callme{
color:blue;
}
.navbar{
	margin-top:100px;
	position:relative;
}

<div class="header">
<div class="call">
<span class="callme">CALL US NOW!</span> 
<span class="number">777.77.7777.777</span> 
</div>
</div>
        <div class="navbar">
            <span>logo</span>
        </div>


<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

如果可能的话，我想在不使用 Bootstrap 的情况下实现这一点。我确定没有必要为此使用网格系统，但无法弄清楚我做错了什么。对我有用的一件事是将 100% 更改为 100vw 但不理解为什么 100% 不起作用。

Answer 1

恕我直言，flexbox 是可行的方法，但由于 Micheal_B 已经涵盖了这一点，我将演示其他样式的基本定位和大杂烩。

我通常从主体开始，它应该为布局的其余部分设定节奏。我看到 body 是 80%，我可以 99% 的信心说，限制 body 的尺寸永远不会完成。

One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn't working.One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn't working.

100% 长度(即宽度或高度)表示它是元素父元素(即包含相关元素的元素)的 100%。因此，例如，如果您在页眉上设置 100%，那么您就是在告诉浏览器，“将页眉的高度设置为正文宽度的 100%”。尽管这听起来合乎逻辑，但它并没有将 body 视为父元素，它实际上指的是 html 元素。我不会深入细节，所以请阅读此 article .这听起来非常违反直觉，所以我总是将 position: relative 应用于 body，这使得它的尺寸引用了视口(viewport)(实际屏幕的边缘)。当您注意到 100vh 如何有效而 100% 无效时，这是因为 vh 和 vw 测量值始终引用视口(viewport)，就像 html 元素一样，就像当它处于 position: relative 时的 body 一样。

@font-face{

font-family:Bebas;
 src:url(BEBAS.TTF);

}
body {
  position: relative;
  width: 100vw;
  margin: 0 auto;
  height: 100vh;
  background: blue;
  overflow: hidden;
}
.header {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  background: #ff6200;
  height: 10%;
  width: 100%;
  color: white;
  font-family: Bebas;
}
.header .call {
  line-height: 100%;
  vertical-align: middle;
}
.navbar {
  position: absolute;
  top: 10%;
  left: 0;
}
.row {
  width: 80%;
  background: red;
  margin: 0 auto;
  height: 80%;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
.footer {
  width: 100%;
  height: 10%;
  background: green;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.callme {
  font-variant: small-caps;
  font-style: normal;
  font-size: 20px;
  font-weight: 900;
  color: #fc4;
}
.col-md-8 {
  width: 66%;
  height: 100%;
  display: inline-block;
  border-right: 3px dashed black;
}
.col-md-4 {
  width: 33%;
  height: 100%;
  display: inline-block;
}
section {
  text-align: center;
}

<header class="header">
  <address class="call">
<span class="callme">Call us now!</span> 
<span class="number">777.77.7777.777</span> 
</address>
</header>
<nav class="navbar">
  <span>logo</span>
</nav>


<main class="row">
  <section class="col-md-8">.col-md-8</section>
  <section class="col-md-4">.col-md-4</section>
</main>
<footer class="footer"></footer>