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 - 粘页脚

回答

相关问题