全屏布局

全屏布局

全屏布局就是指HTML页面铺满整个浏览器窗口，并且没有滚动条。

而且可以随着浏览器的大小变化而变化，整合的解决方案

---

  		html，body {
            margin: 0;
            overflow: hidden;
        }

        header {
            height: 100px;

            position: fixed;
            top: 0;
            left: 0;
            right: 0;

            background-color: darkgray;
        }

        .content {
            position: fixed;
            left: 0;
            right: 0;
            top: 100px;
            bottom: 100px;

            overflow: auto;

            background-color: dodgerblue;
        }

        .content .left {
            width: 300px;
            height: 100%;

            position: fixed;
            left: 0;
            top: 100px;
            bottom: 100px;

            background-color: goldenrod;
        }

        .content .right {
            height: 100%;
            margin-left: 300px;

            background-color: hotpink;
        }

        footer {
            height: 100px;

            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;

            background-color: darkseagreen;
        }

 <header></header>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>

---

实现效果图