圣杯布局

最新推荐文章于 2022-11-28 10:28:14 发布

weixin_34221073

最新推荐文章于 2022-11-28 10:28:14 发布

阅读量91

点赞数

文章标签： python

原文链接：https://my.oschina.net/carbenson/blog/1570422

版权

2019独角兽企业重金招聘Python工程师标准>>>

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body class="HolyGrail">
<header>#header</header>
<div class="HolyGrail-body">
    <nav class="HolyGrail-nav">
        <span>#HolyGrail-nav</span>
    </nav>
    <main class="HolyGrail-content">
        <span>#HolyGrail-content</span>
    </main>

    <aside class="HolyGrail-ads">
        <span>#HolyGrail-ads</span>
    </aside>
</div>
<footer>#footer</footer>
</body>
</html>

body {
    padding: 0px;
    /*去掉body的边距*/
    margin: 0px !important;
}

.HolyGrail {
    display: flex;
    min-height: 100vh; /*vh单位是屏幕高度*/
    flex-direction: column;
}

header, footer {
    background: #666666;
    flex: 0 0 4%;
}

.HolyGrail-body {
    display: flex;
    flex: 1; /*要和HolyGrail的height: 100vh一起用才能实现全屏*/
}

.HolyGrail-content {
    background: #d6d6d6;
    flex: 0 0 70%; /*主栏部分，控制占满屏幕80%*/
}

.HolyGrail-nav, .HolyGrail-ads {
    flex: 1; /*非主栏部分，平分剩下的宽度*/
}

.HolyGrail-ads {
    background: #ff6633;
}

.HolyGrail-nav {
    background: #77bbdd;
}

.HolyGrail-content, .HolyGrail-nav, .HolyGrail-ads {
    flex-wrap: wrap; /*主栏，导航栏，副栏宽度超出自身范围的，自动换行*/
}

/*如果是小屏幕，躯干的三栏自动变为垂直叠加。*/

@media (max-width: 768px) {
    .HolyGrail-body {
        flex-direction: column;
        flex: 1;
    }

    .HolyGrail-nav,
    .HolyGrail-ads,
    .HolyGrail-content {
        flex: auto;
    }
}

圣杯布局是高度全屏的，并且主栏占用屏幕宽度的70%，剩下的30%由副栏和导航栏均分。

通过修改HolyGrail-content的flex第三个参数可以调整主栏占用的比例，然后主栏，导航栏和副栏都设置成wrap，即使子元素超出，也会自动换行，不影响父布局。除非高度超过了，就加大整个body的高度

转载于:https://my.oschina.net/carbenson/blog/1570422