JSFiddle - React, Tailwind, and code Playground
HTML
<div id="imagem"></div>
<div id="header"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat dapibus velit eu aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ut varius neque. Vestibulum faucibus lobortis nibh ac sollicitudin. Sed vehicula sed mi at porta. Aenean dapibus purus eu felis pharetra sollicitudin. Donec consectetur quam quis quam convallis interdum. Curabitur consectetur ipsum sit amet gravida molestie. Aenean a urna vehicula, lobortis ipsum at, efficitur quam. Proin porttitor augue sed auctor facilisis. Maecenas sodales eros elementum, egestas ligula sit amet, iaculis nisl. Phasellus ut pulvinar diam. Nam rhoncus, neque vel aliquet suscipit, sapien enim vestibulum justo, interdum vulputate nisi felis vitae enim.</p>
<p>Phasellus quis erat a odio ullamcorper faucibus. Proin sagittis quis elit sed cursus. Duis maximus in massa at vulputate. Mauris sagittis sed justo ut dictum. Praesent eget odio quam. Nullam a ante nec dolor scelerisque porta sit amet a magna. Praesent vel pharetra orci, vel aliquam orci. Proin in nulla sed urna placerat ultricies at a nulla. Mauris in vulputate enim, id feugiat purus. Suspendisse eu augue quis enim sodales volutpat. Cras leo neque, pulvinar bibendum placerat sit amet, tristique id felis. Aliquam erat volutpat. Sed pretium mauris vel augue malesuada, at consequat purus malesuada. Praesent porttitor magna et venenatis aliquet.</p>
<p>Nulla ut rhoncus ipsum, auctor euismod nunc. Curabitur et laoreet quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in eleifend nisl, eget interdum mi. Pellentesque porta enim sollicitudin sagittis fermentum. Suspendisse mattis porta fringilla. Aliquam rutrum varius varius. Donec at enim lacus. Nunc quis velit ante. Vestibulum malesuada tincidunt congue. Aenean non libero nec elit feugiat auctor non vitae diam. Curabitur convallis iaculis ornare....
CSS
#imagem {
background-color: red;
position: absolute;
height: 10%;
top: 0px;
left: 0px;
z-index: 3;
}
#header {
background-color: blue;
position: fixed;
height: 8.9%;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
#content {
background-color: gainsboro;
position: fixed;
overflow: auto;
height: 91.1%;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
}
JavaScript
var imagem = $("#imagem");
$(window).resize(function() {
imagem.innerWidth(imagem.innerHeight());
});
$(window).trigger("resize");