<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>html页面</title><style>*{padding: 0;margin: 0}#main{width:auto;height: auto;background-color: #ccc;position: relative;padding: 20px;}#left{position: absolute;width: 300px;height: 500px;background-color: blue;}#right{margin: 0 0 0 330px;background-color: yellow;}#footer{width: auto;height: 100px;background-color: orange;text-align: center;}</style></head><body><div id='main'> <div id="left">左边</div> <div id="right">右边</div></div><div id="footer">底部</div></body></html>
主に属性position:fixed
上の階のお兄さんのおかげで、別の方法で解決できました
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>html页面</title><style>*{padding: 0;margin: 0}#main{width:auto;height: auto;background-color: #ccc;padding: 20px;overflow: auto;}#left{float:left;width: 300px;height: 500px;background-color: blue;position: relative;}#right{background-color: yellow;margin-left: 330px;}#footer{width: auto;height: 100px;background-color: orange;text-align: center;clear:both;}</style></head><body><div id='main'> <div id="left">左边</div> <div id="right">右边</div></div><div id="footer">底部</div></body></html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
