前端学习（539）：全屏布局得实现
生活随笔
收集整理的這篇文章主要介紹了
前端学习（539）：全屏布局得实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
運行結果
總結
以上是生活随笔為你收集整理的前端学习（539）：全屏布局得实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决sqlserver 2005安装时提
- 下一篇： 2017年html5行业报告,云适配发布