保护页面底部的页脚
虽然我网站上的大多数页面都有足够的内容，以便为大多数人推到页面底部的页脚。 我想知道从现在开始，无论屏幕的大小如何，它都是如下所示。
我尝试了几种方式，如底部：
等等。似乎从来没有很好地工作，有时会把页脚从容器推动到楼下，在这里使用这些例子中的一些例子。
套件包括 HTML 和 CSS 对于页脚的两部分 /footer & copyright bar/. 无论如何，他们都在里面
.
我删除了我的尝试让他坚持现在看着他，看看你需要改变当前代码的东西。
Live URL -
http://www.mangdevelopment.co.uk/nakedradish
/这是一家餐馆网站。 不要担心这个词 'naked'/.
HTML
CSS:
</section>
我尝试了几种方式，如底部：
0x;
position:absolute:
等等。似乎从来没有很好地工作，有时会把页脚从容器推动到楼下，在这里使用这些例子中的一些例子。
套件包括 HTML 和 CSS 对于页脚的两部分 /footer & copyright bar/. 无论如何，他们都在里面
<section id="footer">
div
.
我删除了我的尝试让他坚持现在看着他，看看你需要改变当前代码的东西。
Live URL -
http://www.mangdevelopment.co.uk/nakedradish
/这是一家餐馆网站。 不要担心这个词 'naked'/.
HTML
<section id="footer">
<div class="container">
<div class="row">
<div class="span1">
<div id="small-logo">
<img src="img/small-logo.png"/>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR BOXES</h6>
<ul>
<a href="#">
<li>Classic Box</li>
</a>
<a href="#">
<li>Vegetarian Box</li>
</a>
<a href="#">
<li>Family Box</li>
</a>
<a href="#">
<li>Dinner Party Box</li>
</a>
<a href="#">
<li>Gift Box</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR RECIPES</h6>
<ul>
<a href="#">
<li>Last Weeks Feature</li>
</a>
<a href="#">
<li>Next Weeks Feature</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>ABOUT US</h6>
<ul>
<a href="#">
<li>The Food</li>
</a>
<a href="#">
<li>How We Sourcex</li>
</a>
<a href="#">
<li>Sustainability</li>
</a>
<li><a href="about.html">About Us</a></li>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</div>
</div>
<div class="span5">
<div id="twitter">
<img alt="" class="twitter-logo" height="50" src="img/twitter-logo.png" title="" width="50"/>
<div class="tweet-bg">
<div class="tweets">
<p>@chefallanp that's just not on really</p>
</div>
<div id="follow-btn">
<img src="img/follow-us.jpg"/>
</div>
</div>
</div>
<div class="checkout-options">
<h6>SECURE CHECKOUT</h6>
<ul>
<li><img src="img/solo-logo.png"/></li>
<li><img src="img/switch-logo.png"/></li>
<li><img src="img/maestro-logo.png"/></li>
<li><img src="img/visa-logo.png"/></li>
<a href="#">
<li><img src="img/facebook-logo.png"/></li>
</a>
<a href="#">
<li><img src="img/twitter-logo-flat.png"/></li>
</a>
</ul>
</div>
</div>
</div>
</div>
<div id="copyright-bar">
<div class="container">
<div class="row">
<div class="copyright-content">
<div class="span4">
<p>The Naked Radish Limited. 2013 All rights reserved.</p>
</div>
<div class="span4 offset4">
<div class="copyright-list">
<ul>
<a href="terms.html">
<li>Terms & Conditions</li>
</a>
<a href="privacy.html">
<li> - Privacy Policy</li>
</a>
<a href="#">
<li> - Cookie Policy</li>
</a>
</ul>
</div>
</div>
</div>
</div>
</div>
</div></section>
CSS:
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
}</section>
没有找到相关结果
已邀请:
13 个回复
郭文康
赞同来自:
:
#footer {position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
}
为您
:
body {margin-bottom:50px;
}
#footer {
background-color: red;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 50px;
margin-bottom: 0px;
}
div {
margin: 20px 20px;
}
body {
margin-bottom: 50px;
}
http://jsfiddle.net/girishgowdayt/RUDWS/
-版本
快网
赞同来自:
FlexBox
对于粘性的尼兹尼亚
页脚
和
标题
没有使用 POSITIONS 在 CSS.
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 50px;
flex-shrink: 0;
background-color: #037cf5;
}
footer {
height: 50px;
flex-shrink: 0;
background-color: #134c7d;
}
main {
flex: 1 0 auto;
}
DEMO - JSFiddle
笔记
: 检查浏览器支持 FlexBox.
https://caniuse.com/#feat=flexbox
风见雨下
赞同来自:
和
在选择器下
:
http://jsfiddle.net/vHNyb/
CSS
#footer {background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
position:fixed;
bottom:0;
width:100%;
}
冰洋
赞同来自:
html, body {height: 100%;
}
在最低页脚之前包装所有内容 div.
.wrapper {height:auto !important;
min-height:100%;
}
您可以根据您想要在浏览器窗口底部显示的页脚的哪个部分定制最小高度。 如果安装它 90%, 10% 页脚头，它将在滚动之前显示。
裸奔
赞同来自:
#fix-footer{position: fixed;
left: 0px;
bottom: 0px;
height: 35px;
width: 100%;
background: #1abc9c;
}
君笑尘
赞同来自:
html {height:100%;
}
body {
min-height:100%; position:relative;
}
.footer {
background-color: rgb/200,200,200/;
height: 115px;
position:absolute; bottom:0px;
}
.footer-ghost { height:115px; }
HTML
快网
赞同来自:
如果这是你的 HTML:
然后用它 JQuery 在每个页面上：
$/function//{
/* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */
function setWrapperMinHeight// {
$/'.wrapper'/.css/'minHeight', window.innerHeight - $/'.nav'/.height// - $/'.footer'/.height///;
}
/* Make sure the main div gets resized on ready */
setWrapperMinHeight//;
/* Make sure the wrapper div gets resized whenever the screen gets resized */
window.onresize = function// {
setWrapperMinHeight//;
}
}/;
风见雨下
赞同来自:
因此，如果您有一个页面，其中内容不足以将其推到结束，它将在观看窗口中间的某个位置; 它看起来非常尴尬，并不知道如何处理它，就像我在高中的第一天一样。
通过宣布规则定位元素
很棒，如果您总是希望您的页脚无论页面的起始头如何都能看到，但是忘记安装底部字段，以便在此页面上的内容的最后一位上不施加它。 如果您的页脚具有动态高度，则变得困难; 自适应网站通常发生的事情，因为它是堆叠元素的性质。
您会在定位找到类似的问题。
. 虽然它真的显示了文档的自然流程中有问题的元素，但如果您发现有一个页面，它仍然不会将其固定在屏幕的底部，几乎没有内容来指定它。
想想实现这一目标
:
宣布标签的高度值
&
交易宣言
投资元素 - shell，通常是包裹身体结构中所含子公司的元素 /它不包括您的物品。
/
http://codepen.io/anon/pen/wWwqqB
$/"#addBodyContent"/.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/".flex-col:first-of-type"/;
}/;
$/"#resetBodyContent"/.on/"click", function// {
$/".flex-col p"/.remove//;
}/;
$/"#addFooterContent"/.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/"footer"/;
}/;
$/"#resetFooterContent"/.on/"click", function// {
$/"footer p"/.remove//;
}/;
html, body {
height: 91%;
}
.wrapper {
width: 100%;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px;
display: block;
min-height: 100%;
}
footer {
background: black;
text-align: center;
color: white;
box-sizing: border-box;
padding: 10px;
}
.flex {
display: flex;
height: 100%;
}
.flex-col {
flex: 1 1;
background: #ccc;
margin: 0px 10px;
box-sizing: border-box;
padding: 20px;
}
.flex-btn-wrapper {
display: flex;
justify-content: center;
flex-direction: row;
}
.btn {
box-sizing: border-box;
padding: 10px;
transition: .7s;
margin: 10px 10px;
min-width: 200px;
}
.btn:hover {
background: transparent;
cursor: pointer;
}
.dark {
background: black;
color: white;
border: 3px solid black;
}
.light {
background: white;
border: 3px solid white;
}
.light:hover {
color: white;
}
.dark:hover {
color: black;
}
</html></body>
裸奔
赞同来自:
使固定
.
CSS
html {
height: 100%;
}
body {
position: relative;
margin: 0;
min-height: 100%;
padding: 0;
}
#header {
background: #595959;
height: 90px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
background-color: #595959;
}
HTML
三叔
赞同来自:
君笑尘
赞同来自:
模拟滤网
. 他比 Flexbox, 浏览器中的支持较少。
核实：
HTML
CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
有用的链接
:
浏览器支持：
https://caniuse.com/#feat=css-grid
完整指南：
https://css-tricks.com/snippet ... grid/
冰洋
赞同来自:
html, body {
min-height: 100%
}
body {
padding-bottom: 88px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 88px;
}
八刀丁二
赞同来自: