<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全屏布局</title><style>html,body{margin: 0;}header{height: 100px;position: fixed;top: 0;left: 0;right: 0;background-color: lightgray;}.content{position: fixed;left: 0;right: 0;top: 100px;bottom: 100px;background-color: aqua;overflow: hidden;}.content .left{width: 300px;height: 100%;position: fixed;left: 0;top: 100px;bottom: 100px;background-color: bisque;}.content .right{margin-left: 300px;height: 100px;background-color: green;}footer{height: 100px;position: fixed;bottom: 0;left: 0;right: 0;background-color: lightgray;}</style>
</head>
<body><header></header><div class="content"><div class="left"></div><div class="right"></div></div><footer></footer>
</body>
</html>运行结果
