Html 如何使页脚和页眉保持100%的浏览器宽度，但将两者之间的所有内容保持在80%

上图就是我想要实现的。无论浏览器大小，顶部页眉都是100%的浏览器宽度。页脚是一样的。我希望这两者之间的其他内容都是80%，如黑框所示。我认为这是一个相对简单的概念，但我的代码不起作用：

@font-face{
字体系列：Bebas；
src:url（BEBAS.TTF）；
}
身体{
宽度：80%；
保证金：0自动；
高度：500px；
背景：蓝色；
}
.标题{
排名：0；
位置：绝对位置；
左：0；
右：0；
背景：#ff6200；
高度：50px；
宽度：100%；
颜色：白色；
字体系列：Bebas；
}
.header.呼叫{
线高：50px；
}
callme先生{
颜色：蓝色；
}
navbar先生{
边缘顶部：100px；
位置：相对位置；
}

现在给我们打电话！
777.77.7777.777 
标志
.col-md-8
.col-md-4

使用flexbox，您可以简单高效地实现此布局：

HTML（无更改）

CSS

@font-face {
    font-family: Bebas;
    src: url(BEBAS.TTF);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 500px;
    margin: 0;
}

.header {
    background: #ff6200;
    flex: 0 0 50px;
    width: 100%;
    color: white;
    font-family: Bebas;
    }

.navbar {
    margin: 0 auto;
    background: aqua;
    width: 80%;
    flex: 1;
}

.row {
    background-color: yellow;
    flex: 0 0 50px;
}

上面的代码呈现此布局：

• 标题：100%宽度
• 页脚：100%宽度
• 介于两者之间的所有内容：80%宽度

---

---

请注意，所有主要浏览器都支持flexbox。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请在此处的左面板中发布CSS:。

是否需要以下内容。我注意到您的主体宽度为80%，我认为您不需要。主体是一个paren元素和元素上的绝对位置会使页面的流中的内容消失

*{
保证金：0；
填充：0；
}
.标题{
背景：橙色；
}
梅因先生{
边框：3倍纯黑；
宽度：80%；
保证金：0自动；
高度：500px；
}
.页脚{
背景：蓝色；
}

标题
主要
页脚

IMHO flexbox是一个不错的选择，但既然Micheal_B已经涵盖了这一点，我将演示其他样式的基本定位和大杂烩

我通常从身体开始，身体应该为接下来的布局设定节奏。我看到身体是80%，我可以99%的自信地说，限制身体的尺寸是永远不会完成的

对我有效的一件事是将100%改为100vw，但不理解为什么100%不起作用。对我有效的一件事是将100%改为100vw，但不理解为什么100%不起作用

100%长度（即宽度或高度）意味着它是元素父元素（即包含相关元素的元素）的100%。因此，如果您在标题上设置100%，例如，您告诉浏览器，“使标题高度为主体宽度的100%。“尽管这听起来合乎逻辑，但它并没有将主体视为其父元素，它实际上是指html元素。我不想谈血淋淋的细节，所以请读这篇文章。这听起来很不直观，所以我总是将

position:relative

应用于主体，使其尺寸参照视口（实际屏幕的边缘）。当您注意到100vh与100%相比是多么有效时，这是因为vh和vw测量值总是引用到视口，就像html元素一样，就像身体在

位置：相对时一样


@font-face{
字体系列：Bebas；
src:url（BEBAS.TTF）；
}
身体{
位置：相对位置；
宽度：100vw；
保证金：0自动；
高度：100vh；
背景：蓝色；
溢出：隐藏；
}
.标题{
排名：0；
位置：绝对位置；
左：0；
右：0；
背景：#ff6200；
身高：10%；
宽度：100%；
颜色：白色；
字体系列：Bebas；
}
.header.呼叫{
线高：100%；
垂直对齐：中间对齐；
}
navbar先生{
位置：绝对位置；
排名前10%；
左：0；
}
.行{
宽度：80%；
背景：红色；
保证金：0自动；
身高：80%；
位置：绝对位置；
排名前10%；
底部：10%；
左：10%；
右：10%；
}
.页脚{
宽度：100%；
身高：10%；
背景：绿色；
位置：绝对位置；
底部：0；
左：0；
右：0；
}
callme先生{
字体变体：小大写字母；
字体风格：普通；
字体大小：20px；
字号：900；
颜色：#fc4；
}
.col-md-8{
宽度：66%；
身高：100%；
显示：内联块；
右边框：3倍黑色虚线；
}
.col-md-4{
宽度：33%；
身高：100%；
显示：内联块；
}
部分{
文本对齐：居中；
}

现在给我们打电话！
777.77.7777.777 
标志
.col-md-8
.col-md-4
您在使用bootstrap吗？是的，但它就在那里，因为我想用它做其他事情。接下来：