[ css ] 大名鼎鼎的圣杯双飞翼

[ouuz]

第 6 天 被昨天的题折磨的要生要死的小张同学今天一觉睡到下午，根本没有起床的动力。这时一贯爱**小张的王老板再次出现 “你今天要是能把大名鼎鼎的圣杯布局和双飞翼布局写出来，我就请你吃蛙蛙！”。小张眼含泪水，从床上爬起来奋战。可是她实在不会写，你能帮她蹭到这一顿蛙蛙吗？

[deximy]

本来这个是打算昨天发到思考题的，结果咕到了今天（

经典圣杯布局

        <div id="container">
            <div id="body"></div>
            <div id="left"></div>
            <div id="right"></div>
        </div>
        <style>
            body
            {
                margin: 0px;
            }
            #body
            {
                width: 100%;
                height: 100%;
                background-color: #66ccff;
                float: left;
            }
            #left
            {
                width: 200px;
                height: 100%;
                background-color: #ff0000;
                float: left;
                margin-left: -100%;
                left: -200px;
                position: relative;
            }
            #right
            {
                width: 200px;
                height: 100%;
                background-color: #0080ff;
                float: left;
                margin-left: -200px;
                position: relative;
                right: -200px;
            }
            #container
            {
                padding-left: 200px;
                padding-right: 200px;
            }
        </style>

flex圣杯布局

        <div id="container">
            <div id="left"></div>
            <div id="body"></div>
            <div id="right"></div>
        </div>
        <style>
            body
            {
                margin: 0px;
            }
            #body
            {
                width: 100%;
                height: 100%;
                background-color: #66ccff;
            }
            #left
            {
                width: 200px;
                height: 100%;
                background-color: #ff0000;
            }
            #right
            {
                width: 200px;
                height: 100%;
                background-color: #0080ff;
            }
            #container
            {
                height: 100%;
                display: flex;
                flex-direction: row;
            }
        </style>

双飞翼布局

        <div id="container">
            <div id="body"></div>
        </div>
        <div id="left"></div>
        <div id="right"></div>
        <style>
            body
            {
                margin: 0px;
            }
            #body
            {
                width: 100%;
                height: 100%;
                background-color: #66ccff;
                float: left;
            }
            #left
            {
                width: 200px;
                height: 100%;
                background-color: #ff0000;
                margin-left: -100%;
                float: left;
            }
            #right
            {
                width: 200px;
                height: 100%;
                background-color: #0080ff;
                margin-left: -200px;
                float: left;
            }
            #container
            {
                height: 100%;
                width: 100%;
                float: left;
            }
        </style>

[Qin]

@deximy 其实主要考的就是最经典的圣杯布局，看了你的代码感觉完成的不错，但是对于为什么要这样做有没有自己的一些想法，可以说一下经典布局的思路吗

[deximy]

@deximy 其实主要考的就是最经典的圣杯布局，看了你的代码感觉完成的不错，但是对于为什么要这样做有没有自己的一些想法，可以说一下经典布局的思路吗

结构部分：body、left、right由加载顺序决定，先加载body部分提高用户体验；
式样部分：三栏全部左浮动，body占100%页面，利用margin-left强行将左右两栏拉到body左右两边，再用padding防止body的内容被左右两栏挡住