JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title></title>
    <style>
        #page{margin:0 auto;width:960px;}
        #header{width:960px; height:60px; position:absolute; top:0;background-color:#ccc;}
        #footer{width:960px; height:30px; position:absolute; bottom:0; background-color:#ccc;}
        #content{width:960px; overflow: auto; position:absolute; top:60px; bottom:30px;}
    </style>
 
</head>
<body>
<div id="page">
    <div id="header">定义顶部</div>  
    <div id="content">co<br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>bntent定义中间</div>
    <div id="footer">footer定义底部</div>
</div>
</body>
 
 
</html>

JavaScript

/*
如果你在div#container和div#footer容器外增加内容的话，新加进徕的元素需要进行绝对定位。



*/