How to Use CSS to Position a Fixed Variable Height Header and a Scrollable Content Box

How do I use CSS to position a fixed variable height header and a scrollable content box?

Assuming by "fixed" you mean position:fixed, I don't think it's possible in pure CSS, as position:fixed takes the element out of the document flow.

However, it should just take a line or two of JavaScript to get what you want. Something like this (untested, only for example purposes, will need syntax tweaked to actually work):

var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';

Something like that should get you the rendered height of the fixed <div> and set the content <div>'s margin accordingly. You'll also need to explicitly set a background color on the fixed <div>, otherwise the content will appear to bleed into the fixed one when scrolling.

How to make a fixed header with variable height

You can do it with pure CSS by nesting position: sticky; elements and give the navbar as position a top: -10px

You set the <nav> to the fixed height of 40px
Then you use nav { position: sticky; top: -10px; }. That will allow the navbar to scroll 10px off the viewport leaving it's height at 30px visible.
To have the content such as links or text not to leave the viewport, you can wrap them inside another element and apply also display: sticky; to it. Now use top: 0; to prevent those elements from leaving the viewport.

nav {
  position: sticky;
  top: -10px;
  height: 40px;
  background-color: red;
}

nav > div {
  position: sticky;
  top: 0;
}


/* for scrolling purpose only */
body {
  min-height: 500vh;
  margin: 0;
}

/* if you want the text vertically centered */
nav {
  display: flex;
  align-items: center;
}

nav > div {
  display: flex;
  align-items: center;
  height: 30px;
}

<nav>
  <div>Test</div>
</nav>

Fixed header, footer with scrollable content

Something like this

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html>

How to position sticky header on fixed position div with overflow-y: scroll

Dimensions and overflow added for .info-box-content. Height needs to be adjusted. Is set to a small value for demo purposes.

.info-box{    background-color: #0f0;    padding: 1em;    position: fixed;    z-index: 9999;    width: 22em;    height: 38em;  }
.info-box-content{  width: 20em;  height: 10em;  overflow-y: scroll;}
.info-box-header{    position: sticky;}

<div class="info-box">  <div class="info-box-header">  <a data-val="perfil" class="box-control">    <img class="close-btn" ... />  </a>
<h3>PERFIL</h3><br><br></div>
<div class="info-box-content">    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>

SCSS (or CSS) layout with dynamic height header and main content below

PLEASE USE POSITION STICKY

body {
  background-color: white;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body >  p {padding: 0 20px ;}
div.sticky {
  /* Sticky bar for  */
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  background-color: #6cb0f9;
  width: 100%;
  height: 100px;
  margin: 0;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 100px;
}

<body>

  <div class="sticky">This is my Sticky Header</div>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

</body>

CSS and DIV with header and body with scrollable content, and fixed sidebar to right

I created a simple fiddle, that doesn't use calc (support isn't great - http://caniuse.com/calc, and then there's the big unknown of any performance penalty you may/may not hit using it..)

It's very straight forward, using simple CSS.

http://jsfiddle.net/ruYGH/3/