CSS - 粘頁腳 - 優文庫

似乎有要噸與這一個亟待解決的問題，但他們都不似乎爲我工作...CSS - 粘頁腳

我創造了這個小的jsfiddle向您展示：jsfiddle footer

和CSS：

.footer { 
    width:798px; 
    border-top: 2px solid #2E181A; 
    clear: both; 
    padding: 5px 0 0 0; 
    background-color: inherit; 
    text-align: center; 
    bottom:0; 
    background-color: #E6D9BD; 
    position:relative; 
    height: 30px; 
    margin: -30px auto 2px auto; 
    z-index:30; 
} 

.container { 
    width: 788px; 
    margin: 0px auto 0px auto; 
    padding: 0px 0px 30px 0px; 
    border:5px solid #2E181A; 
    background-color: #E6D9BD; 
    min-height: 100%; 
    position:relative; 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.contentleft { 
    background-color: inherit; 
    margin:5px 10px 10px 10px; 
    padding:10px 5px 30px 5px; 
    float:left; 
    overflow: hidden; 
    width: 300px; 
    display:block; 
} 

.contentright { 
    background-color: inherit; 
    margin:5px 0px 10px 10px; 
    border:0px solid #2E181A; 
    padding:10px 5px 30px 5px; 
    float:left; 
    overflow: hidden; 
    width: 420px; 
    display:block; 
}

我在div.footer設置一個頂部邊框，這應該是可見的，邊框和div.container之間的空間不大。

希望你能快速看一下代碼，看看我做錯了什麼！

來源

2014-02-16 Simon Jensen

會不會粘頁腳，顧名思義，堅持以網頁用戶的滾動過程中？假設這是真的，那麼爲什麼你的'.footer'的位置相對而不是固定的？ – djthoms

呃......我可能已經把「粘性」的定義誤解了。我的意思是一個頁腳，無論內容多長時間都停留在底部。我的頁腳是這樣的，但不是我想要的... –

只需按照http://www.cssstickyfooter.com/ – Nit

我不確定這是你想要的嗎？ http://jsfiddle.net/2jn3J/19/

我爲底部div添加了一個高度爲50px的容器，該容器固定在底部。頁腳div現在絕對位於底部，div高度爲30px，因此留下20px的間隙。

.footer-container { 
    background-color:white; 
    height:50px; 
    width:100%; 
    position:fixed; 
    bottom:0; 
    z-index:30; 
    clear: both; 
} 

.footer { 
    border-top: 2px solid #2E181A; 
    background-color: inherit; 
    text-align: center; 
    background-color: #E6D9BD; 
    height:30px; 
    position:absolute; 
    bottom:0; 
    width:100%; 
} 

.container 
{ 
    width: 100%; 
    margin: 0px auto 0px auto; 
    padding: 0px 0px 30px 0px; 
    background-color: #E6D9BD; 
    height:2000px; 
    position:relative; 
     content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 
.contentleft 
{ 

    background-color: inherit; 
    margin:5px 10px 10px 10px; 
    padding:10px 5px 30px 5px; 
    float:left; 
    overflow: hidden; 
    width: 300px; 
     display:block; 
} 
.contentright 
{ 

    background-color: inherit; 
    margin:5px 0px 10px 10px; 
    border:0px solid #2E181A; 
    padding:10px 5px 30px 5px; 
    float:left; 
    overflow: hidden; 
    width: 420px; 
    display:block; 
}

來源

2014-02-16 00:38:56 Jordan

我以爲一個粘腳是一個總是低於其他內容的腳？不是一個固定的頁腳，它總是在視口的底部。我錯了嗎？ – Marcel

頁腳粘到屏幕底部 – Jordan

在你的小提琴的第13行將它改爲「margin：30px auto 2px auto;」然後30px頁邊距出現在頂部 – Jordan

你居然接近從http://www.cssstickyfooter.com/html-code.html工作取得的概念，它只是需要一個html, body { height: 100%; }成爲「粘性」。

http://jsfiddle.net/2jn3J/22/

如果你想完全正確做到這一點，並獲得內容和頁腳之間的空間，你會得再添div與min-height: 100%;和.container刪除min-height: 100%;。

http://jsfiddle.net/2jn3J/28/

CSS：

html, body { height: 100%; } 
.wrap { min-height: 100%; } 
.footer { 
    width:798px; 
    border-top: 2px solid #2E181A; 
    clear: both; 
    padding: 5px 0 0 0; 
    background-color: inherit; 
    text-align: center; 
    bottom:0; 
    background-color: #E6D9BD; 
    position:relative; 
    height: 30px; 
    margin: -37px auto 0 auto; 
    z-index:30; 
} 

.container { 
    width: 788px; 
    margin: 0px auto 0px auto; 
    padding: 0px 0px 30px 0px; 
    border:5px solid #2E181A; 
    background-color: #E6D9BD; 
    position:relative; 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
    overflow: auto; 
} 

.contentleft { 
    background-color: inherit; 
    margin:5px 10px 10px 10px; 
    padding:10px 5px 30px 5px; 
    float:left; 
    overflow: auto; 
    width: 300px; 
    display:block; 
} 
.contentright { 
    background-color: inherit; 
    margin:5px 0px 10px 10px; 
    border:0px solid #2E181A; 
    padding:10px 5px 30px 5px; 
    float:left; 
    overflow: hidden; 
    width: 420px; 
    display:block; 
}

HTML：

<div class="wrap"> 
<div class="container"> 

<div class="contentleft">Content in the left</div> 
<div class="contentright">Content in the right</div> 

</div> 
</div> 

<div class="footer">Sticky footer</div>

來源

2014-02-16 00:56:26 Marcel

Thx爲你的答案@Marcel，但那並沒有成功。我相信，如果min-height：100％位於包裝或容器中，則不會產生任何影響，但會更改此「margin：-30px auto 2px auto;」到這個「margin：30px auto 2px auto;」做好了！ :) Thx很多爲您的答案，但這個減去是錯誤。 –

現代清潔CSS「粘性頁腳」從James Dean

HTML

<!DOCTYPE html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html>

CSS

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

Demo here

來源

2014-06-17 04:21:08

這臺仿真CSS。頁眉和頁腳是100px的高度和容器DIV採取之間屏幕的所有空間

CSS：

#frame{ 
    display: table; 
    height: 100% 
    width: 100%; 
} 

#header{ 
    display: table-row; 
    height: 100px; 
    background-color: red; 
} 

#container{ 
    display: table-row; 
} 

#footer{ 
    display: table-row; 
    height: 100px; 
    background-color: black; 
}

HTML：

<div id="frame"> 
    <div id="header"></div> 
    <div id="container"></div> 
    <div id="footer"></div> 
</div>

JSFiddle（我增加了一些額外的樣式身體因爲小提琴在iframe中，但在通常的瀏覽器行爲，你不會需要）。

來源

2015-06-03 14:05:30

有了Flexbox，生活就變得簡單了。

.FlexContainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.Main-Content { 
 
    flex: 1; 
 
    // This ensures, all extra space is stretched by this class. Remaining will stretch to own height 
 
} 
 

 
/* Only to distinguish. No need to give body height */ 
 

 
header { 
 
background-color: red; 
 
} 
 
main { 
 
background-color: green; 
 
} 
 
footer { 
 
background-color: blue; 
 
} 
 

 
body { 
 
height: 300px; 
 
}

<body class="FlexContainer"> 
 
    <header>HEADER</header> 
 
    <main class="Main-Content"> 
 
    This is main section 
 
    </main> 
 
    <footer>FOOOOTERRR</footer> 
 
</body>

來源

2017-11-11 00:35:15 Mahesh

CSS - 粘頁腳

回答

相關問題