How to have a footer and header 100% browser wide, but keep everything in between 80%

Question

The above image is what I am trying to achieve. The top header is the width of the browser at 100% regardless of the size of the browser. The footer is the same. I would like everything else between the two to be 80%, as shown in the black box. I find this a relatively simple concept, but my code does not work:

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>

Run code

If possible, I would like to achieve this without using Bootstrap. I am sure that you do not need to use a grid for this, but I can’t understand what I'm doing wrong. One thing that worked for me was changing 100% to 100 volts, but didn't understand why 100% didn't work.

Answer 1

IMHO flexbox - , Micheal_B , .

, . , 80%, 99% , .

, , 100% 100 , , 100% . , , 100% 100 , , 100% .

100% (.. ) , 100% (.. , ). , 100% , , : " 100% ". , , , html. , . , position: relative , , ( ). , 100vh, 100% , , vh vw , html, , , position: relative.

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

Answer 2

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%

DEMO

---

, flexbox , IE 8 9. , Safari 8 IE10, . , , CSS : Autoprefixer.

Answer 3

- . , 80%. , . - ,

*{
  margin: 0;
  padding: 0;
}
.header{
  background: orange;
}
.main{
  border:3px solid black;
  width: 80%;
  margin: 0 auto;
  height: 500px;
}
.footer{
  background: blue;
}

	<div class="header">HEADER</div>
	<div class="main">MAIN</div>
	<div class="footer">Footer</div>

And it is not clear which element you are trying to center or size. Is this a navigation bar? I think you are trying to make the body 80% and trying to get the desired effect. I do not think this is a good way to do this, because all children will be part of this. Make the body 100% and make the element of the children smaller and center them relative to the body.