双飞翼布局，圣杯布局（三种实现方式）

双飞翼布局，圣杯布局（三种实现方式）

flex布局实现

css代码

/* 弹性布局实现 */
        * {
            margin: 0;
            padding: 0;
        }

        header {
            display: flex;
        }

        aside {
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }

        nav {
            flex-grow: 1;
            height: 100vh;
            background-color: aqua;
        }

        section {
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }

html代码

 <header>
        <aside>1</aside>
        <nav>2</nav>
        <section>3</section>
    </header>

浮动实现

css代码

/* 浮动 */
        * {
            margin: 0;
            padding: 0;
        }

        aside {
            float: left;
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }

        nav {
            float: left;
            width: calc(100% - 400px);
            height: 100vh;
            background-color: aqua;
        }

        section {
            float: left;
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }

html代码

<header>
        <aside>1</aside>
        <nav>2</nav>
        <section>3</section>
    </header>

定位实现

css代码

 /* 定位 */
        * {
            margin: 0;
            padding: 0;
        }

        header {
            position: relative;
        }

        aside {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }

        nav {
            margin-left: 200px;
            float: left;
            width: calc(100% - 400px);
            height: 100vh;
            background-color: aqua;
        }

        section {
            position: absolute;
            top: 0;
            right: 0;
            float: left;
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }

html代码

 <header>
        <aside>1</aside>
        <nav>2</nav>
        <section>3</section>
    </header>