css 高度自适应铺满全屏

html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>dddd</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body class="HolyGrail">
    <header>...</header>
    <div class="HolyGrail-body ">
        <main class="HolyGrail-content">...</main>
        <nav class="HolyGrail-nav">...</nav>
        <aside class="HolyGrail-ads">...</aside>
    </div>
    <footer>...</footer>
</body>

</html>

css:

.HolyGrail {
    display: flex;
    flex-direction: column;
    background-color: blueviolet;
}

header,
footer {
    height: 100px;
    background-color: aquamarine;
}

body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
}

.HolyGrail-body {
    flex: 1;
    background-color: brown;
}

这里需要注意的是设置body的min-height: 100vh;以及margin: 0;

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页