JSFiddle - React, Tailwind, and code Playground
HTML
<div id="header">HEADERHEADERHEADERHEADERHEADERHEADER</div>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id ligula dui, sit amet auctor dolor. Curabitur ornare mi ac ligula tincidunt pharetra. Quisque elit erat, tincidunt a suscipit sed, suscipit eget nisi. Nunc sapien purus, suscipit non accumsan ac, feugiat eu augue. Nunc ac hendrerit nibh. Aliquam vitae tellus quam. Praesent accumsan nisl et lorem tristique eget pellentesque quam rhoncus. In hac habitasse platea dictumst. Donec commodo feugiat erat sed rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed blandit lacinia pulvinar. Sed ac nunc at velit tincidunt condimentum. In hac habitasse platea dictumst. Morbi magna neque, fermentum id suscipit eu, dignissim at nisl. Donec convallis tincidunt malesuada. Proin dignissim mattis mauris sit amet adipiscing.
Ut id purus ac tortor dignissim mattis vitae nec odio. Integer ornare, sapien ut venenatis congue, eros nisi blandit risus, molestie euismod sem elit mattis leo. Sed elementum enim a ipsum tempus consequat. Proin laoreet, est id tincidunt dapibus, dui libero molestie nunc, nec ultrices orci ipsum id enim. Nunc ut arcu justo. Sed facilisis volutpat mi non sodales. In hac habitasse platea dictumst. Phasellus porttitor, odio ut sagittis porttitor, felis neque venenatis urna, sed feugiat augue purus quis leo. Nullam bibendum imperdiet lectus, tincidunt vehicula diam blandit nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse adipiscing magna at elit convallis eu facilisis nisi fermentum.
Suspendisse potenti. Phasellus sem arcu, mattis ut vehicula id, aliquet at nulla. Donec egestas pellentesque libero eget placerat. Pellentesque a pellentesque eros. Maecenas a nisl at velit mattis semper quis et lorem. Duis auctor, urna ac egestas gravida, mi ligula...
CSS
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 400px;
height: 100%;
background-color: #fec;
/* to keep center */
margin: auto;
/* this is not necessary
position: relative;*/
/* added */
box-sizing: border-box;
padding-top: 40px;
margin-top: -40px;
}
#header {
/*border: 1px solid red;*/
height: 40px;
background-color: green;
color: #fff;
/* add this if header out of wrapper */
position: relative;
z-index: 9;
}
#content {
/*border: 1px solid green;*/
/*position:absolute;
bottom:0px;
top: 40px;*/
width:100%;
overflow: auto;
background-color: #333;
color: #666;
/* add */
height: 100%;
}