那些遇到过的问题

如何使用CSS Grid布局粘贴页脚？

Mit*_*sev 14 html css html5 css3 css-grid

我在CSS Grid布局中找到了一个粘性页脚的CodePen解决方案,但它对我来说有两个问题:

  1. 这是有点丑min-height: 100%和height: 100%
  2. 它只适用于身体中的两个元素(div和footer)

我需要一些适用于这种HTML结构的东西:

<body>
    <nav>Some navigation buttons</nav>
    <main>The content</main>
    <footer>Copyrights and stuff</footer>
</body>
Run Code Online (Sandbox Code Playgroud)

我真的不想收拾<nav>和<main>成<div>,我就喜欢这样做纯CSS.

// Not required!
// This is just to demo functionality.

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});
Run Code Online (Sandbox Code Playgroud) 
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

.content {
  padding: 20px;
}

.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 16px Sans-Serif;
}

h1 {
  margin: 0 0 20px 0;
}

p {
  margin: 0 0 20px 0;
}

.footer {
  background: #42A5F5;
  color: white;
  padding: 20px;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h1>Sticky Footer with Grid</h1>
  <p><button id="add">Add Content</button></p>
</div>

<footer class="footer">
  Footer
</footer>
Run Code Online (Sandbox Code Playgroud)

Whi*_*her 14

这是一个CSS网格解决方案,但使用类的目标要好得多.
使用网格区域将非常简单:

html,body{
  height: 100%;
}
body{
  margin: 0;
}
body {
  display: grid;
  grid-gap: 10px;
  height: 100%;
  grid-template-columns:1fr;
  grid-template-areas:
            "nav"
            "main"
            "footer";
  grid-template-rows: 100px 1fr 80px;
}
nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}
nav {
  background-color: #7E57C2;
}
main {
  background-color: #F8BBD0;
}
footer {
  background-color: #7E57C2;
}
Run Code Online (Sandbox Code Playgroud)

https://codepen.io/whisher/pen/vWmvQw

Hen*_*Cat 6

诀窍是使用：

min-height: 100vh; grid-template-rows: auto auto 1fr; 和...

align-self: end; 对于页脚。

如果我们添加左/右外边距，将其<nav>放在标题中，为页脚内容添加一个外边距，并为主要内容假设另一个网格：

body {
    display: grid;
    grid-gap: 1em 0;
    grid: auto auto 1fr / 10vw 1fr 10vw;
    margin: 0;
    min-height: 100vh;
}

header {
    background-color: #7E57C2;
    grid-column: 2;
}

main {
    background-color: #F8BBD0;
    display: grid;
    grid-column: 2;
}
footer {
    background-color: #7E57C2;
    align-self: end;
    grid-column: 2;
    margin-bottom: 1em;
}
Run Code Online (Sandbox Code Playgroud) 
<body>
    <header>Some navigation buttons</header>
    <main>The content</main>
    <footer>Copyrights and stuff</footer>
</body>
Run Code Online (Sandbox Code Playgroud)

这具有以前的解决方案所缺乏的优雅简单性。

使用常绿浏览器，无需将问题复杂化。

以前的答案不可维护。陷阱包括：

  • 强制页眉/页脚固定像素尺寸。
  • 使用网格区域而不是更简单的网格定义。将 grid-template-rows 和 grid-template-columns 组合成一行是有奖励的。
  • 广泛的 'width/height/min-height: 100%' 定义在 html 和 body 标签上随处可见。当 IE6 占据主导地位但现代浏览器不需要时，这可能是有道理的。
  • 使用弹性盒布局。这不是未来的布局引擎。CSS 网格将是我想要在五年内维护的内容。
  • 使用像素和百分比。什么是像素？谁知道什么时候有视网膜屏幕和高分辨率手机屏幕。我曾经喜欢像素，但还有其他更有意义的单位，“vw/vh/vmin/vmax”加上“em/rem”。CSS grid 的百分比测量也即将结束，所以最好改掉这个习惯。

Ron*_*ton 5

粘性页脚是通过一行CSS实现的，即：min-height: 100vh。

下面的例子：

body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: [column-line-1] minmax(128px, 256px) [column-line-2] auto [column-line-3] minmax(128px, 256px) [column-line-4];
    grid-template-rows: [row-line-1] 48px [row-line-2] auto [row-line-3] auto [row-line-4] auto [row-line-5] auto [row-line-6];
    background:#fafafa;
    /*Below provides sticky footer*/
    min-height: 100vh;
}

body > aside {
    background:#9e9e9e;
}

body > aside > section {
    margin: 0px 12px 0px 12px;
}

body > header {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
}

body > header > section {
    flex: 1 1 auto;
    align-self: center;
    min-width: 100%;
    min-height:48px;    
}

body > header > nav {
    flex: 0 1 auto;
    align-self: auto;
    min-width: 100%;
    min-height:48px;
    
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    align-items: center;
    
    margin-left:12px;
    margin-right:12px;
}

body > header > nav > section {
    flex: 1 1 auto;
    align-self: center;
    
    display: flex;
    flex-flow: row nowrap;    
    align-content: center;
    align-items: center;
    
    height:auto;
    width:50%;
}

body > header > nav > section:nth-of-type(1) {
    justify-content: flex-start;
}

body > header > nav > section:nth-of-type(2) {
    justify-content: flex-end;
}

body > header > nav > section > div {
    flex: 0 1 auto;
    align-self:center;
    
    display: flex;
    flex-flow: row nowrap;    
    align-content: center;
    align-items: center;  
    justify-content: center;
    
    margin: 0px 12px 0px 12px;
}

body > main {
    background:#e3f2fd;
    
}

body > main > section {
    margin: 0px 12px 0px 12px;
}

body > nav {
    
    background:#e0e0e0;
}
body > nav > section {
    display: grid;
    margin: 0px 12px 0px 12px;
}

body > footer {
    grid-column-start: column-line-1;
    grid-column-end: column-line-4;
    grid-row: row-line-5;
    background:#eeeeee;

}

body > footer > section {
    margin: 0px 12px 0px 12px;
}


@media screen and (max-width: 479px) {
    header {
        grid-column-start: column-line-1;
        grid-column-end: column-line-4;
    }
    main {
        grid-column-start: column-line-1;
        grid-column-end: column-line-4;
        grid-row: row-line-2;
    }
    aside {
        grid-column-start: column-line-1;
        grid-column-end: column-line-4;
        grid-row: row-line-3;
    }
    nav {
        grid-column-start: column-line-1;
        grid-column-end: column-line-4;
        grid-row: row-line-4;
    }
}

@media screen and (min-width: 480px) and (max-width: 639px) {
    nav {
        grid-column: column-line-1;
        grid-row: row-line-2;
    }
    aside {
        grid-column: column-line-1;
        grid-row-start: row-line-3;
        grid-row-end: row-line-5;
    }
    main {
        grid-column: column-line-2 / column-line-4;
        grid-row-start: row-line-1;
        grid-row-end: row-line-5;
    }
}

@media screen and (min-width: 640px) {
    header {
        grid-column-start: column-line-1;
        grid-column-end: column-line-4;
    }
    nav {
        grid-column: column-line-1;
        grid-row-start: row-line-2;
        grid-row-end: row-line-5;
    }
    aside {
        grid-column: column-line-3;
        grid-row-start: row-line-2;
        grid-row-end: row-line-5;
    }
    main {
        grid-column: column-line-2;
        grid-row-start: row-line-2;
        grid-row-end: row-line-5;
    }
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html lang="en">
<!-- 
    Created by Ron Royston, https://rack.pub, © 2018 MIT License
    Available online at https://github.com/rhroyston/html5
        
        ? NO COMMENTS ABOVE DOCTYPE declaration.
        
        ? Consider page viewing experience across device types, sometimes called Responsive Web Design, RWD.
        
        ? Mozilla Developer Network HTML ELEMENT REFERENCE
            https://developer.mozilla.org/en-US/docs/Web/HTML/Element
            
        ? Validate HTML with The W3C Markup Validation Service
            https://validator.w3.org/
            
        ? Favicon image displays in browser tab
            http://realfavicongenerator.net/
-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile viewing enhancement -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ? Description should be roughly 155 characters, no double quotes, use keywords -->
    <meta name="description" content="CSS Responsive Grid Layout. Simple. Clean. Golden." />
    <!-- ? Format as Primary Keyword - Secondary Keyword | Brand Name, keep under 55 characters -->
    <title>Golden Grid - CSS Responsive Grid Layout. Simple. Clean. Golden.</title>
    
</head>
<body class="mdc-typography">
    <header>
        <nav>
            <section>
                <div>
                    <img src="//intrest.run/media/character.png" height="24px">
                </div>
            </section>
            <section>
                <div>
                    <button>
                        Sign In
                    </button>
                </div>
            </section>
        </nav>
    </header>
    <main>
        <section>
            <h4>Page Name</h4>
        </section>      
        
        <section>
            <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
        </section>
        
        <section>
            <p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
        </section>

    </main>
    <nav>
        <section>
            <!--
                This area is normally on the left hand side of page
            -->
            <h3>Navigation</h3>
            <a href="#">Home</a>
            <a href="#">Chapter 1</a>
            <a href="#">Chapter 2</a>
            <a href="#">Chapter 3</a>
            <a href="#">Chapter 4</a>
        </section>
    </nav>
    <aside>
        <!--
            This area is normally on the right hand side of page
        -->
        <section>
            <h3>Sidebar</h3>
            <p>Aside Element. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </section>
    </aside>
    <footer>
        <section>
            <h3>Footer</h3>
            <p>Footer Element. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </section>
    </footer>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

12564 次

最近记录：

7 年，2 月 前
在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？ 602
CSS3 100vh在移动浏览器中不恒定 209
更多相关链接
相关归档
如何在Twitter Bootstrap中覆盖样式 128
如何将整个div设为链接？ 39
jquery ui autocomplete定位错误 29
嵌套HTML5节标签 29
CSS:全尺寸背景图片 12
dragexit vs dragleave - 哪个应该用？ 11
如何从iframe访问文档中的<img rel="nofollow noreferrer" />？ 6
如何重复网格自动行的高度 6
优化JS/jQuery性能(getBoundingClientRect)并消除布局重绘 5
具有相同background-image :: after的三角形 4
难疑归档
你如何创建一个远程Git分支？ 3030
"git add -A"和"git add"之间的区别. 2788
PHP'foreach'如何实际工作？ 1926
使用Git从先前的提交中分支 1658
在Vim中复制整行 1555
检查变量是否是JavaScript中的字符串 1550
"无法找到或加载主类"是什么意思？ 1277
这是什么意思？"'NSUnknownKeyException',原因:...此类不是键值X的键值编码兼容" 1143
基于容器宽度的字体缩放 1083
测量Python中经过的时间？ 1031