如何使用bootstrap製作粘性頁腳？

在遵循n個粘性頁腳教程後，我卡住了。
任何人都可以解釋我的粘腳在哪裏出錯？
主要想法是頁腳位於頁面的底部。
如果頁面大於窗口，那麼在向下滾動頁面之後頁腳應該可見。如何使用bootstrap製作粘性頁腳？

該代碼適用於主頁，因爲它應該除了在頁腳下方留出一點空間之外。
一旦內容大於窗口，頁腳停止工作。

CSS：

html, body { 
    min-height:100%; 
    height:100%; 
    margin: 0; 
    padding:0; 
    font-family: 'Open Sans', sans-serif; 
    background-color: #2b2d2f; 
    color: #d9edf7; 
} 
#wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -30px; 
} 

#wrap:after { 
    content: ""; 
    display: block; 
} 

#footer, #wrap:after { 
    height: 30px; 
} 
#footer{ 
    background-color: #2b542c; 
    text-align:center; 
}

HTML：

<div id="wrap"> 
... content... 
</div> 
<div id="footer"> 
... content ... 
</div>

來源

2016-11-10 Dylan Westra

請考慮重新定義您的「粘性」的想法，這是粘在整個頁面或到窗口底部的底部，另外，你所提供的鏈接不起作用 – Simplicity

@Simplicity謝謝。我編輯了這個問題 –

-1

#footer { 
    background-color: #2b542c; 
    text-align: center; 
    position: fixed; 
    width: 100vw; 
    top: calc(100vh - 30px); 
}

如果你改變你的頁腳風格，這就是你將得到的是一個置頂頁腳即響應，並將努力不管它的父元素大小如何設置，因爲它依賴於屏幕。

來源

2016-11-10 16:04:24 Breezer

這是一個很棒的方式來讓粘腳到窗口！但不是我所要求的。這個想法是讓它在內容之下變得粘稠。或者如果內容太小，不能讓它粘在底部 –

你的第一個問題很不好解釋，我對不理解的道歉。 – Breezer

您可以在#wrap上使用min-width。看看這個Codepen

就像：

#wrap { 
    min-height: calc(100vh - 30px); /* '30px' - Height of the footer */ 
}

希望這有助於！

來源

2016-11-10 16:05:19

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin: 0 0 100px; /* bottom = footer height */ 
 
} 
 
footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color:red; 
 
}

<body> 
 
    <nav></nav> 
 
    <article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</article> 
 
    <footer></footer> 
 
</body>

來源

2016-12-01 16:38:37

如何使用bootstrap製作粘性頁腳？

回答

相關問題