web-dev-qa-db-ja.com

CSSグリッドレイアウトでスティッキーフッターを使用するにはどうすればよいですか？

CSSグリッドレイアウトのスティッキーフッターには このCodePenソリューション が見つかりましたが、2つの問題があります。

  1. min-height: 100%とheight: 100%ではちょっとugいです
  2. ボディ内の2つの要素（divとフッター）でのみ機能します

このHTML構造で動作するものが必要です。

<body>
    <nav>Some navigation buttons</nav>
    <main>The content</main>
    <footer>Copyrights and stuff</footer>
</body>

<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");
});
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;
}
<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>
htmlcsshtml5css3css-grid
13
Mitko Rusev

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;
}

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

13
Whisher

CSSグリッドは、複雑なレイアウトをまとめるための優れたツールです。

しかし、3行の単純な1列のグリッドを探しており、フッターはコンテナの下部に固定されています。

この場合、flexboxがよりシンプルで効率的なソリューションです。（各flexアイテム内で常にグリッドを使用できます。）

// 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("p");
});
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

nav {
  flex: 0 0 100px;
  background-color: lightgreen;
}

main {
  background-color: orangered;
}

footer {
  flex: 0 0 100px;
  margin-top: auto; /* pin footer to the bottom; see link below for details */
  background-color: lightgray;
}

nav, main, footer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>Nav</nav>
<main>
  <p><button id="add">Add Content</button></p>
</main>
<footer>Footer</footer>

改訂codepen

フレックス自動マージンの詳細については、この投稿を参照してください。

3
Michael_B

スティッキーフッターは、CSSの1行で実現されます。つまり、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;
    }
}
<!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>
3
Ron Royston

トリックは以下を使用することです：

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

align-self: end;フッター用。

左/右マージンを追加する場合は、<nav>ヘッダーで、フッターコンテンツにマージンを追加し、メインコンテンツに別のグリッドを想定します。

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

    header {
        grid-column: 2;
    }

    main {
        display: grid;
        grid-column: 2;
    }

    footer {
        align-self: end;
        grid-column: 2;
        margin-bottom: 1em;
    }

これには、以前のソリューションにはないエレガントなシンプルさがあります。

evergreen browsersを使用すると、問題を複雑にする必要はありません。

以前の回答は維持できません。落とし穴は次のとおりです。

  • ヘッダー/フッターを固定ピクセル寸法に強制します。
  • より単純なグリッド定義の代わりにグリッド領域を使用します。 grid-template-rowsとgrid-template-columnsを1つのライナーに結合するためのボーナスポイントがあります。
  • Htmlタグとbodyタグのどこでも、広範な「幅/高さ/最小高さ：100％」の定義。これは、IE6がねぐらを支配したが、最新のブラウザでは必要ないときに意味をなしたかもしれません。
  • flexbox layout。を使用します。これは将来のレイアウトエンジンではありません。CSSグリッドは5年後に維持したいものです。
  • ピクセルとパーセンテージを使用します。ピクセルとは何ですか？網膜スクリーンと高解像度の電話スクリーンがあることを知っている人。以前はピクセルが好きでしたが、もっと意味のある他のユニット、「vw/vh/vmin/vmax」と「em/rem」があります。割合の測定はCSSグリッドでも行われているため、習慣から抜け出すのが最善です。
2
Henry's Cat