css-两边固定，中间自适应布局_header 左右定宽中间撑开-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37636738/article/details/102897122

本文介绍了CSS布局中的双飞翼布局和圣杯布局，这两种布局方式都旨在实现页面主体部分自适应，同时两侧内容固定。双飞翼布局通过额外的外层元素解决中间主要内容的优先显示，避免了圣杯布局在浏览器缩放时可能出现的问题，但增加了DOM节点。圣杯布局不需额外DOM，但在某些情况下可能会导致布局混乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

两种布局简介

参考： https://www.jianshu.com/p/5037be1402c0

两种布局简介

相同点：利用布局，可优先渲染主要部分
不同点：
圣杯布局：借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分；
双飞翼布局：给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)

圣杯布局

优点：不需要添加dom节点
缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。（main<left即会变形）

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
            <style type="text/css">   
            .wrapper {  
                padding: 0 100px; 
                overflow:hidden;  
            }  
            .col {  
                position: relative;   
                float: left;  
            }  
            .main {  
                width: 100%;  
                height: 200px;  
                background:yellow;  
            }  
            .left,.right {  
                width: 100px;   
                height: 200px;   
                background:red;  
            }  
            .left{ 
                margin-left: -100%;  
                left: -100px;  
            }  
            .right {  
                margin-left: -100px;   
                right: -100px;  
            }  
              
            </style>  
        </head>  
        <body>  
            <section class="wrapper">  
                <section class="col main">main</section> 
                <aside class="col left">left</aside>  
                <aside class="col right">right</aside>  
            </section>  
        </body>  
    </html>

双飞翼布局

目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。
优点：不会像圣杯布局那样变形
缺点：多加了一层dom节点

  <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
            <style type="text/css">  
                body {min-width: 550px;}  
                .col {float: left;}           
                #main {  
                    width: 100%;  
                    height: 200px;  
                    background-color: #ccc;  
                }             
                #main-wrap {  
                    margin: 0 190px;/*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding*/          
                }  
                #left,#right {  
                    width: 190px;  
                    height: 200px;  
                    background-color: #0000FF;  
                }     
                #left{  
                    margin-left: -100%; 
                }         
                #right {  
                    margin-left: -190px;
                    background-color: #FF0000;  
                }  
            </style>  
        </head>  
        <body>  
            <div id="container">  
                <div id="main" class="col">  
                    <div id="main-wrap"> #main </div>  
                </div>  
                <div id="left" class="col">#left</div>  
                <div id="right" class="col">#right</div>  
            </div>  
        </body>  
    </html>

使用定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            header,footer { height: 50px;background:#ccc;}
            .wrapper { position: relative;}
            .main { height: 200px; margin:0 100px;background:blue;}
            .left, .right{ width: 100px; height: 200px; position: absolute; top: 0;background:red;}
            .left{ left: 0;}
            .right{ right: 0;}
            
        </style>
    </head>
    <body>
        <header>header</header>
        <section class="wrapper">
            <section class="col main">main</section>
            <aside class="col left">left</aside>
            <aside class="col right">right</aside>
        </section>
        <footer>footer</footer>
    </body>
</html>