實現CSS - 粘滯頁腳

我按照這裏提到的步驟 - http://materializecss.com/footer.html - 創建了粘滯頁腳，但結果並不如預期。實現CSS - 粘滯頁腳

我複製粘貼下面的代碼到materialize.min.css文件：

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    } 

    main { 
    flex: 1 0 auto; 
    }

來源

2015-04-17 xennygrimmato

*但結果並不如預期。*您可以更具體地給我們演示（也許是小提琴）嗎？ –

你爲什麼要將unic的css複製到縮小文件中？ – ajmajmajma

你可能不使用<main>標籤

注意：我們在Flexbox的構建我們的HTML因此頁腳底部始終爲頁腳。重要的是要保持3 HTML5標籤中頁面的結構是很重要的：<header>，<main>， <footer>

來源

2015-04-23 09:39:57

感謝Kenneth De Win贏得了這個修復我的問題 – ZoT

這解決了我的問題。 –

我應該如何使用

我把所有的內容都包含在頁腳裏面，並且它沒有工作，保持頁腳之外的頁腳也沒有工作// = – kroe

前（主），只需添加（＃）。

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    } 

    #main { 
    flex: 1 0 auto; 
    }

來源

2015-10-17 07:15:29

這隻有在你不使用主標籤時纔有意義，而是使用'.main'類的div，這不是他們推薦的。 – batjko

在CSS和主選擇器中放置一個背景顏色，並看看這兩個元素。如果其中一個沒有改變顏色，它可能是在它之前的CSS問題 - 即。檢查它上面的樣式。

來源

2016-08-06 19:57:56 James

如果你看一下例子頁面的源代碼，你可以看到他們是如何做的： http://materializecss.com/footer.html

結構化你的HTML如下面的例子：

<body> 
    <header></header> 
    <main></main> 
    <footer></footer> 
</body>

來源

2016-12-06 21:50:32

對於使用灰燼的。 js（v2.14）：您必須稍微修改說明。

如果您的應用程序/模板/ application.hbs看起來是這樣的：

<header> 
</header> 

<main> 
{{outlet}} 
</main> 

<footer> 
</footer>

那麼你的應用程序/風格/ app.js應該是這樣的：

.ember-view { 
    display: flex; 
    flex-direction: column; 
} 

main { 
    min-height: 100vh; 
    flex: 1 0 auto; 
}

來源

2017-08-20 01:04:07 DataDino

這解決了我的問題。非常感謝！ – Cameron

Materialise的CSS需要結構：

<body> 
    <header></header> 
    <main></main> 
    <footer></footer> 
</body>

被保留。這裏是你如何能實現它與反應：

的index.html

<body id="root"></body>

index.js

ReactDOM.render(<App/>, document.getElementById('root'))

App.js

render() { 
return (
    [ 
    <header> 
     ... 
    </header>, 
    <main> 
     ... 
    </main>, 
    <footer> 
     ... 
    </footer> 
    ] 
);

請注意，我們正在返回一個數組來呈現同一級別上的多個項目。

索引。css

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

main { 
    flex: 1 0 auto; 
}

來源

2018-02-25 19:35:22

實現CSS - 粘滯頁腳

回答

相關問題